JSD-2204-MVC-微博项目-Day15
2024-04-13 21:07:46
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 {@AutowiredUserMapping 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");//如果没有登录返回的是nullreturn 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;@Overridepublic 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;//作者的idprivate String nick;//作者名称@Overridepublic 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-uploadaction="/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:staticJSD-2204-MVC-微博项目-Day15相关推荐
- 学习HM微博项目第1天
步骤:搭建基本环境 -> 展示子控制器 -> 项目分层 -> 增加导航功能 -> 增加导航栏按钮. 搭建基本环境 该项目使用代码搭建UI界面,所以在HMAppDelegate的 ...
- 解决 Visual Studio 2017 RC 不兼容低版本 Visual Studio 创建的 MVC 4 项目的问题
解决 Visual Studio 2017 RC 不兼容低版本 Visual Studio 创建的 MVC 4 项目的问题 参考文章: (1)解决 Visual Studio 2017 RC 不兼容低 ...
- 菜鸟级三层框架（EF+MVC）项目实战之 系列一 EF零基础创建领域模型
系列概述:全系列会详细介绍抽象工厂三层的搭建,以及EF高级应用和 ASP.NET MVC3.0简单应用,应用到的技术有Ef.Lambda.Linq.Interface.T4等. 由于网上对涉及到的技术 ...
- iOS微博项目（一）
0. 参考资料 无限互联的陈为讲的仿微博项目视频 1. 搭建环境 1.1 建立single项目,去掉viewcontroller.m .h . 1.2 添加opensource: DDMenu, Fo ...
- 图文详解远程部署ASP.NET MVC 5项目
图文详解远程部署ASP.NET MVC 5项目 原文:图文详解远程部署ASP.NET MVC 5项目 话外篇: 由于感觉自己的机器比较慢,配置不好,所以最近想把之前的项目部署到实验室的服务器上,但是由 ...
- IOS开发基础之微博项目第1天-OC版
IOS开发基础之微博项目第1天-OC版 纯代码创建的项目,具有参考价值 该资料来自2014年7月3号,虽然时间过去较长,但是oc和swift不同,oc语法迭代更新慢 具有一定的参考意义 涉及xib加载 ...
- IOS开发基础之微博项目
IOS开发基础之微博项目 关键性代码 // // NJViewController.m // 06-预习-微博(通过代码自定义cell)// #import "NJViewControlle ...
- 使用Visual Studio 2015 开发ASP.NET MVC 5 项目部署到Mono/Jexus
最新的Mono 4.4已经支持运行asp.net mvc5项目,有的同学听了这句话就兴高采烈的拿起Visual Studio 2015创建了一个mvc 5的项目,然后部署到Mono上,浏览下发现一堆错 ...
- 如何发布.Net MVC 网站项目（攻略集锦）
转载自诗人江湖老,原文地址 参考文献 既然是攻略,就必然有参考文献,放在文章开头,以示敬意! 1.MVC项目发布步骤 2.未能从程序集加载"System.ServiceModel.Activ ...
最新文章
- Numpy 广播机制（两个不同维度对象进行数学运算）
- 【怎样写代码】函数式编程 -- Lambda表达式（四）：Lambda表达式与Expression树
- solidworks操作记录
- 福玛特机器人评测_深度爆料扫地机器人地宝福玛特D820评测好不好？怎么样呢？内幕曝光测评...
- 反馈速度小于 200ms！“弹窗”功能让你极速触达用户内心
- 剑指 Offer 27. 二叉树的镜像【无取巧解法，易于理解！】
- spring data jpa 分页查询
- Linux下Rails3 + Lighttpd + fcgi部署研究
- js60秒倒计时防刷新
- ASN.1编解码与编程
- [Ext JS 4] 实战之Chart, Column Chart 定制颜色
- 防止列宽被撑破的办法,通过css控制
- 【转】CSS（10）盒子模型
- .ico 图标下载网站推荐
- 调整外接显示屏亮度的方法
- win 连续截图功能(PSR 屏幕录制)
- QingCloud Insight 2016 | 科技，洞见未来
- springcloud+fastdfs在docker中设置防盗链
- 什么是BEPI认证？
- Meta 标签与搜索引擎优化