![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
SSM+Vue简单项目实现记录
文章平均质量分 85
将vue和ssm结合,做了一个滑板社区的网站.....
三十岁之前尽量不秃
这个作者很懒,什么都没留下…
展开
-
6.pagehelper+el-pagination
因为在项目中有很多视频展示模块,都会用到分页查询,所以使用pageHelper和el-pagination进行实现,参考博客后端部分,以分页查看BATB视频为例添加pom依赖<dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <version>5.1.10</version>原创 2022-04-03 15:06:32 · 672 阅读 · 0 评论 -
5.主页部分
轮播图插件: vue-awesome-swiper此时还未集成element-ui,所以图片轮播就找了一个插件,参考博客使用步骤:安装vue-awesome-swiper(安装稳定版本2.6.7)npm install vue-awesome-swiper@2.6.7 --save引入vue-awesome-swiper:一般通过main.js进行全局引入import VueAwesomeSwiper from ‘vue-awesome-swiper’import ‘swiper/d原创 2022-04-03 14:50:45 · 916 阅读 · 0 评论 -
4.公共组件
创建公共组件headerheader组件还有其子组件LoginAbout和LoginAboutNull,用户登录成功以后,将id用sessionStorage保存,通过判断sessionStorage中的id是否为空显示LoginAbout还是LoginAboutNull组件<!-- Header部分 --><template> <div id="header" ref="header"> <!-- 颜色选择器 --> &l原创 2022-04-03 14:39:29 · 815 阅读 · 0 评论 -
3.购买服务器并部署
购买服务器我购买的是阿里云的服务器,参考教学视频前端部署我使用的是nginx部署的前端,nginx配置如下在服务器中新建路径 /mydata/frontCode, 然后将前端项目通过 npm run build指令打包,将打包生成的dist文件夹通过Xftp上传到创建的该路径下,给该vue项目888端口,注意: 别忘记在阿里云服务器的安全组里添加后端部署宝塔面板在安装的时候,会提供tomcat的安装,但是我给卸载了,手动安装了一遍,参考博客但是这篇博客的打包项目的步骤我试了之后无效,看了原创 2022-04-03 13:33:40 · 1839 阅读 · 0 评论 -
0.准备工作
该项目的想法原创 2022-04-03 12:45:42 · 772 阅读 · 0 评论 -
2.注册模块
注册页面主要实现的功能① 验证vip: 非vip用户不得注册② 用户头像上传并回显,默认显示默认头像③ 验证用户的注册是否是第二次注册④ 用户注册成功,添加登录日志一. 验证vip: 用户在输入学号和姓名的时候,姓名输入框失去焦点触发axios请求,在数据库中的vip表查询是否存在该用户,如果存在返回true,否则返回false,返回false,弹出提示框提示信息,并在用户点击确定之前,清空刚才输入的信息,并重新将焦点定位到学号一栏页面显示前端代码一, 验证是否存在该vipche原创 2022-03-13 19:53:32 · 3361 阅读 · 0 评论 -
1.登录模块
登录模块主要实现的功能有:① 登录功能: 用户输入学号,密码,验证码验证登录② 用户登录日志: 用户登录成功后,将用户的学号,登录时间,ip地址存入数据库一. 登录功能验证码模块实现的思想: 后台将生成验证码传给前端,并同时保存到session中, 用户输入学号,密码,验证码发送给后端, 后端取出session中的验证码进行对比,如果验证码错误,直接返回字符串"验证码错误", 如果验证码正确,继续查找是否存在该用户,如果存在, 返回"用户存在", 不存在返回 “用户不存在”验证码实现: 我原创 2022-03-13 18:16:14 · 5404 阅读 · 2 评论