JSD-2204-MVC-微博项目-Day15

最新推荐文章于 2022-10-18 23:16:30 发布

程序猿 Monkey

最新推荐文章于 2022-10-18 23:16:30 发布

阅读量458

点赞数

文章标签： mvc java servlet

本文链接：https://blog.csdn.net/TheNewSystrm/article/details/125810940

版权

1.后端的MVC

前端的MVC实际上是将后端MVC中的V又分成了MVC三部分
后端MVC也是将实现一个业务的所有代码划分为三部分,分别是页面相关, 控制器相关和数据相关,对应的就是MVC三部分
实现一个业务功能需要写这三部分代码,顺序一般是V->C->M

2.微博项目步骤:

准备工作:
创建boot6工程步骤和其它工程一样
application.properties里面添加和boot5一样的内容
创建数据库和表

create database weibo charset=utf8;

use weibo;

create table user(id int primary key auto_increment,username varchar(50),password varchar(50),nick varchar(50));

注册登录功能:
创建reg.html页面参考boot3工程中的内容注册时向/reg发出请求
创建controller.UserController 添加reg方法处理/reg请求

2.1创建User实体类, 声明在reg方法的参数列表处

创建mapper.UserMapper 添加insert和selectByUsername方法
在Controller里面调用mapper的方法
创建login.html页面向/login发出请求
在Controller里面添加login方法处理/login请求, 在方法中调用mapper中的方法参考boot3中代码

实现记住登录状态:
HttpSession对象的作用是: 同一个客户端多次请求会共享同一个Session对象,把数据放到Session对象里面可以将此数据在多次请求之间共享.
在登录成功时,将当前登录成功的用户对象保存到会话对象中, 之后的请求如果需要判断是否登录或者需要用到当前登录的用户信息的话,直接从Session会话对象中获取即可.

2.2项目目录

2.3代码展示

2.3.1UploadController.java(文件上传层)

package cn.tedu.boot6.controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;
import java.util.UUID;

@RestController
public class UploadController {

    @RequestMapping("/upload")
    public String upload(MultipartFile picFile) throws IOException {
        //得到文件的原始文件名字
        String fileName = picFile.getOriginalFilename();
        //得到后缀
        String suffix = fileName.substring(fileName.lastIndexOf("."));
        //得到唯一未见名
        fileName = UUID.randomUUID()+suffix;
        //文件夹路径
        String dirPath = "E:/files";
        File dirFile = new File(dirPath);
        if (!dirFile.exists()){
            dirFile.mkdirs();
        }
        //完整的文件路径
        String filePath = dirPath+"/"+fileName;
        //吧文件的路径
        picFile.transferTo(new File(filePath));
        //吧文件路径返回给客户端
        return "/"+fileName;
    }

    @RequestMapping("/remove")
    public void remove(String url){
        //得到文件的完整路径
        String filePath = "E:/files"+url;
        //删除图片文件
        new File(filePath).delete();
    }

}

2.3.2UserController.java(用户控制层)

package cn.tedu.boot6.controller;

import cn.tedu.boot6.entity.User;
import cn.tedu.boot6.mapping.UserMapping;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpSession;

@RestController
public class UserController {

    @Autowired
    UserMapping mapping;

    @RequestMapping("/reg")
    public int reg(@RequestBody User user){
        User u = mapping.selectByUser(user.getUsername());
        if (u != null) {
            return 2;
        }
        mapping.insert(user);
        return 1;
    }


    @RequestMapping("/login")
    public int login(@RequestBody User user, HttpSession session){
        User u = mapping.selectByUser(user.getUsername());
        if (u!=null){
            if (user.getPassword().equals(u.getPassword())){
                //得到当前客户端对应的会话对象
                session.setAttribute("user",u);
                return 1;
            }
            return 2;
        }
        return 3;
    }

    @RequestMapping("/currentUser")
    public User currentUser(HttpSession session){
        User user = (User) session.getAttribute("user");
        //如果没有登录返回的是null
        return user;
    }

    @RequestMapping("/logout")
    public void logout(HttpSession session){
        //删除会话中的user对象
        session.removeAttribute("user");
    }

}

2.3.3WeiBoController.java(微博控制层)

package cn.tedu.boot6.controller;

import cn.tedu.boot6.entity.User;
import cn.tedu.boot6.entity.WeiBo;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpSession;
import java.util.Date;

@RestController
public class WeiBoController {

    @RequestMapping("/weibo/insert")
    public void insert(@RequestBody WeiBo weiBo, HttpSession session){
        //得到当前的登录对象
        User user =(User) session.getAttribute("user");
        if (user==null){
            System.out.println("未登录不允许发微博");
            return;
        }
        System.out.println("weiBo = " + weiBo);
        //设置微博的发布时间为当前时间  new Date() 得到当前的系统时间
        weiBo.setCreated(new Date());
        //把当前登录的用户信息赋值给weibo对象
        weiBo.setUserId(user.getId());
        weiBo.setNick(user.getNick());
        System.out.println(weiBo);
    }

}

2.3.4User.java(用户对象)

package cn.tedu.boot6.entity;

public class User {
    private Integer id;
    private String username;
    private String password;
    private String nick;

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                ", nick='" + nick + '\'' +
                '}';
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getNick() {
        return nick;
    }

    public void setNick(String nick) {
        this.nick = nick;
    }
}

2.3.5WeiBo.java(微博对象)

package cn.tedu.boot6.entity;

import java.util.Date;

public class WeiBo {
    private Integer id;
    private String content;
    private String url;
    private Date created;
    private Integer userId;//作者的id
    private String nick;//作者名称

    @Override
    public String toString() {
        return "WeiBo{" +
                "id=" + id +
                ", content='" + content + '\'' +
                ", url='" + url + '\'' +
                ", created=" + created +
                ", userId=" + userId +
                ", nick='" + nick + '\'' +
                '}';
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }

    public Date getCreated() {
        return created;
    }

    public void setCreated(Date created) {
        this.created = created;
    }

    public Integer getUserId() {
        return userId;
    }

    public void setUserId(Integer userId) {
        this.userId = userId;
    }

    public String getNick() {
        return nick;
    }

    public void setNick(String nick) {
        this.nick = nick;
    }
}

2.3.6UserMapping.java(用户数据访问层)

package cn.tedu.boot6.mapping;

import cn.tedu.boot6.entity.User;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;

@Mapper
public interface UserMapping {
    @Select("select * from user where username = #{username}")
    User selectByUser(String username);

    @Insert("insert into user values(null,#{username},#{password},#{nick})")
    void insert(User user);
}

2.3.7WeiBoMapping.java(发布文章数据访问层)

package cn.tedu.boot6.mapping;

import org.apache.ibatis.annotations.Mapper;

@Mapper
public interface WeiBoMapping {

}

2.3.8index.html(微博首页)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <div>
    <h1>微博首页</h1>
      <!--user值为null代表没有登录-->
      <div v-if="user==null">
          <a href="/reg.html">注册</a>
          <a href="/login.html">登录</a>
      </div>
      <!--v-else是上面的v-if状态面板-->
      <div v-else>
          <h2>欢迎{{user.nick}}回来</h2>
          <a href="javascript:void(0)" @click="logout()">退出登录</a>
          <a href="/send.html">发布微博</a>
      </div>


  </div>
<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script type="text/javascript">
let v = new Vue({
	el:"body>div",
	data:{
	    user:null
	},
    created:function (){
	    //发送请求获取当前客户端登录的用户对象
	    axios.get("/currentUser").then(function (response) {
	        /*把服务器响音的用户对象赋值给Vue里面的变量*/
            v.user = response.data;
            //如果没有登录返回的是“”字符串
            if(response.data==""){
                v.user=null;
            }
        })
    },
    methods:{
        logout(){
            if(confirm("您确认退出当前登录吗？")){
                //发出登出的请求
                axios.get("/logout").then(function () {
                    //让页面显示成未登录状态
                    v.user = null;
                })
            }
        }
    }
})
</script>
</body>
</html>

2.3.9login.html(登录页面)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
</head>
<body>
<div>
  <h1>登录页面</h1>
  <input type="text" v-model="user.username" placeholder="用户名">
  <input type="password" v-model="user.password" placeholder="密码">
  <input type="button" value="提交" @click="login()">
</div>
<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script type="text/javascript">
let v = new Vue({
	el:"body>div",
	data:{
	  user:{
	    username:"",
        password:""
      }
	},
    methods:{
	  login(){
	    axios.post("/login",v.user).then(function (response){
	      if (response.data == 1){
	        alert("登录成功");
	        location.href = "/";
          }else if(response.data == 2){
	        alert("密码错误");
          }else{
	        alert("该用户不存在");
          }
        })
      }
    }
})
</script>
</body>
</html>

2.3.10reg.html(注册页面)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
</head>
<body>
  <div>
    <input type="text" v-model="user.username" placeholder="用户名">
    <input type="password" v-model="user.password" placeholder="密码">
    <input type="text" v-model="user.nick" placeholder="昵称">
    <input type="button" value="提交" @click="reg()">
  </div>
<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script type="text/javascript">
let v = new Vue({
	el:"body>div",
	data:{
	  user:{
	    username:"",
        password:"",
        nick:""
      }
	},
    methods:{
	  reg(){
	    axios.post("/reg",v.user).then(function (response) {
          if (response.data == 1){
            alert("注册成功");
            location.href="/";
          }else{
            alert("该用户已存在");
          }
        })
      }
    }
})
</script>
</body>
</html>

2.3.11send.html(发布文章页面)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
  <h1>发布微博页面</h1>
  <input type="text" v-model="weibo.content" placeholder="说点儿什么...">
  <el-upload
          action="/upload"
          name="picFile"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-success="handleSuccess"
          :on-remove="handleRemove">
    <i class="el-icon-plus"></i>
  </el-upload>
  <el-dialog :visible.sync="dialogVisible">
    <img width="100%" :src="dialogImageUrl" alt="">
  </el-dialog>
  <el-button @click="insert()">发布博客</el-button>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

<script>
  let v = new Vue({
    el: '#app',
    data: function() {
      return {//在这里面定义变量
        dialogImageUrl: '',
        dialogVisible: false,
        weibo:{
          content:"",
          url:""
        }
      }
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
        //file.response的带的是文件上传成功时服务器响应的内容(此内容就是图片的路径)
        let url = file.response;
        //发出删除图片的请求
        axios.get("/remove?url="+url).then(function () {
          alert("服务器中，文件删除成功")
          v.weibo.url="";
        })
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleSuccess(response,file,fileList){
        //吧服务器响应的图片路径  给到vue的变量
        v.weibo.url=response;
      },
      insert(){
          if (v.weibo.url ==""){
            alert("请选择上传的图片");
            return;
          }
          //发布微博的请求
          axios.post("/weibo/insert",v.weibo).then(function () {
            alert("发布完成");
            location.href="/";
          })
      }
    }
  })
</script>
</html>

2.3.12application.properties(配置sql,文件上传)

spring.datasource.url=jdbc:mysql://localhost:3306/weibo?characterEncoding=utf8&serverTimezone=Asia/Shanghai&useSSL=false
spring.datasource.username=root
spring.datasource.password=root
#修改上传文件大小限制
spring.servlet.multipart.max-file-size=10MB
#配置静态资源文件夹
spring.web.resources.static-locations=file:E:/files,classpath:static