在线网站免费谷歌官方网站首页

一个完整的社交网站系统需要涉及到用户登录、发布动态、关注、评论、私信等各方面。这里提供一个简单的实现示例，供参考。

1. 前端代码

前端使用Vue框架，以下是部分代码示例：

登录页：

<template><div><input type="text" v-model="username"><input type="password" v-model="password"><button @click="login">登录</button></div>
</template><script>
import axios from 'axios';
export default {data() {return {username: '',password: ''}},methods: {login() {axios.post('/api/login', {username: this.username,password: this.password}).then(res => {// 登录成功，跳转到首页});}}
}
</script>

首页：

<template><div><div v-for="post in posts" :key="post.id"><h3>{{ post.title }}</h3><p>{{ post.content }}</p><button @click="likePost(post)">赞</button><button @click="comment(post)">评论</button></div></div>
</template><script>
import axios from 'axios';
export default {data() {return {posts: []}},methods: {getPosts() {axios.get('/api/posts').then(res => {this.posts = res.data;});},likePost(post) {// 点赞},comment(post) {// 评论}},mounted() {this.getPosts();}
}
</script>

1. 后端代码

后端使用Spring Boot框架，以下是部分代码示例：

登录Controller：

@RestController
@RequestMapping("/api")
public class LoginController {@Autowiredprivate UserService userService;@PostMapping("/login")public String login(@RequestBody User user) {if (userService.checkUser(user)) {return "success";} else {return "failure";}}
}

UserService类：

@Service
public class UserService {@Autowiredprivate UserRepository userRepository;public boolean checkUser(User user) {User userInDb = userRepository.findByUsername(user.getUsername());if (userInDb != null && userInDb.getPassword().equals(user.getPassword())) {return true;} else {return false;}}
}

PostController类：

@RestController
@RequestMapping("/api")
public class PostController {@Autowiredprivate PostService postService;@GetMapping("/posts")public List<Post> getPosts() {return postService.getAllPosts();}@PostMapping("/posts")public void addPost(@RequestBody Post post) {postService.addPost(post);}
}

PostService类：

@Service
public class PostService {@Autowiredprivate PostRepository postRepository;public List<Post> getAllPosts() {return postRepository.findAll();}public void addPost(Post post) {postRepository.save(post);}
}

PostRepository类：

public interface PostRepository extends JpaRepository<Post, Long> {
}

UserRepository类：

public interface UserRepository extends JpaRepository<User, Long> {User findByUsername(String username);
}

Post类：

java

@Entity
public class Post {@Id@GeneratedValue(strategy = GenerationType.AUTO)private Long id;private String title;private String content;private LocalDateTime createTime;// 省略getter和setter方法，以及构造方法等
}

User类：

java

@Entity
public class User {@Id@GeneratedValue(strategy = GenerationType.AUTO)private Long id;private String username;private String password;// 省略getter和setter方法，以及构造方法等
}

1. 数据库代码

使用MySQL数据库，以下是部分代码示例：

创建数据库：

sql

CREATE DATABASE social;

创建用户表：

sql

CREATE TABLE `user` (`id` int(11) NOT NULL AUTO_INCREMENT,`username` varchar(255) DEFAULT NULL,`password` varchar(255) DEFAULT NULL,PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

创建动态表：

sql

CREATE TABLE `post` (`id` int(11) NOT NULL AUTO_INCREMENT,`title` varchar(255) DEFAULT NULL,`content` text,`create_time` datetime DEFAULT NULL,PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

以上是简单的实现示例，实际社交网站系统需要考虑更复杂的业务逻辑和安全性问题。完整的实现可参考相关开源项目，例如：https://github.com/b3log/symphony