vue+springboot项目流程(青青菜鸟 |
您所在的位置:网站首页 › springboot修改启动图标 › vue+springboot项目流程(青青菜鸟 |
(1)
素材:https://pan.baidu.com/s/1ZZ8c-kRPUxY6FWzsoOOjtA 提取码:up4c
数据库:名称:xdb,内容如下,自行创建(139条消息) 【SpringBoot+Vue】全网最简单但实用的前后端分离项目实战笔记 - 数据库设计_大菜007的博客-CSDN博客
(2)前端:
(139条消息) 【SpringBoot+Vue】全网最简单但实用的前后端分离项目实战笔记 - 前端_vue+springboot前后端分离开发实战_大菜007的博客-CSDN博客
1.node -v和npm -v版本高一点没关系 2.见图 3.改配置可以使用vscode的搜索功能,然后看情况改! 4.改标题如图,将vue-admin-template换成如图所示!(get-page-title.js删除 || 'vue-admin-template') 5.ctrl+c 输入 y, 再输入 npm run dev部署项目 6.①登录页面 src/views/login/index.vue(src/utils/validate.js)7. 按F12检查页面 ,左上角鼠标对应开启,可以知道布局对应的style! 8.②下拉菜单 src/layout/components/Navbar.vue 图标svg文件可上 https://www.iconfont.cn/ 下载 接下来跟着前端博客改
到此为止,前端就准备得差不多了。 (3)后端: (139条消息) 【SpringBoot+Vue】全网最简单但实用的前后端分离项目实战笔记 - 后端_大菜007的博客-CSDN博客1.导包 2.配置文件 3.代码生成器 4.启动类加注解,进行测试 5.跟着链接写即可,全的,省略的接口在Controller中,自己看即可。 package com.lantu.sys.controller; import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper; import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import com.lantu.common.vo.Result; import com.lantu.sys.entity.User; import com.lantu.sys.service.IUserService; import org.apache.ibatis.annotations.Param; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.security.crypto.password.PasswordEncoder; import org.springframework.util.StringUtils; import org.springframework.web.bind.annotation.*; import org.springframework.stereotype.Controller; import java.util.HashMap; import java.util.List; import java.util.Map; /** ** 前端控制器 * * * @author xsp * @since 2023-05-15 */ @RestController //细节 @RequestMapping("/user") //@CrossOrigin 跨越处理 public class UserController { @Autowired private IUserService userService; //密码加密 @Autowired private PasswordEncoder passwordEncoder; //查询全部信息接口 @GetMapping("/all") public Result getAllUser(){ List list = userService.list(); return Result.success(list,"查询成功鸭!"); } //登录接口 @PostMapping("/login") public Result login(@RequestBody User user){ Map data = userService.login(user); if(data != null){ return Result.success(data); } return Result.fail(20002,"用户名或密码错误"); } //用户信息接口 @GetMapping("/info") public Result getUserInfo(@RequestParam("token") String token){ //根据token获取用户信息,根据redis获取 Map data = userService.getUserInfo(token); if(data != null){ return Result.success(data); } return Result.fail(20003,"用户信息获取失败"); } //注销接口 @PostMapping("/logout") public Result logout(@RequestHeader("X-Token") String token){ userService.logout(token); return Result.success("注销成功"); } // 查询用户列表 @GetMapping("/list") public Result getUserListPage(@RequestParam(value = "username", required = false) String username, @RequestParam(value = "phone", required = false) String phone, @RequestParam("pageNo") Long pageNo,//当前页 @RequestParam("pageSize") Long pageSize) { //每页显示多少条 LambdaQueryWrapper wrapper = new LambdaQueryWrapper(); wrapper.eq(StringUtils.hasLength(username), User::getUsername, username); wrapper.eq(StringUtils.hasLength(phone), User::getPhone, phone); wrapper.orderByDesc(User::getId);//按ID降序排序 Page page = new Page(pageNo, pageSize); //当前页和每页显示多少条 userService.page(page, wrapper); Map data = new HashMap(); data.put("total", page.getTotal()); data.put("rows", page.getRecords()); return Result.success(data); } //新增接口 @PostMapping public Result addUser(@RequestBody User user){ //Result表示返回空 user.setPassword(passwordEncoder.encode(user.getPassword())); userService.save(user); return Result.success("新增用户成功!"); } //修改接口 @PutMapping public Result updateUser(@RequestBody User user){ //Result表示返回空 user.setPassword(null);//表示不修改密码 userService.updateById(user); return Result.success("修改用户成功!"); } //根据id获取用户信息 , 配合修改接口使用 @GetMapping("/{id}") public Result getUserById(@PathVariable("id") Integer id){ User user = userService.getById(id); return Result.success(user); } //删除接口 @DeleteMapping("/{id}") public Result deleteUserById(@PathVariable("id") Integer id){ userService.removeById(id); return Result.success("删除用户成功"); } }6.如果接口是post请求,用postman来测试。注意带参数,带Headers参数该如何操作! 7.注销接口:登录成功生成token,获取用户信息可以通过token,注销也要获取token 到此为止写了登录,获取信息,注销接口后,后端就准备得差不多了,现在开始前后端对接工作。 前后端对接 1.src/api/user.js 修改 2修改vue.config.js,屏蔽mock请求 3 修改 .env.development 中的base api,打包部署的话要修改.env.production 4.去idea写跨越问题代码--在配置类中 到此为止,前后端对接工作完成,开始对用户管理(crud)布局与接口进行前后端的交互。 主要使用elementui官网的组件来完成本项目中vue前端的开发! 1.用户管理界面(src/views/sys/user.vue) 搜索栏 (1)Card卡片--简单卡片 (2)输入框 (3)Button按钮 (4)src/App.vue(全局组件) (5)Icon--加到标签的icon属性中 (6)Layout布局 结果列表 (1)Card卡片 (2)Table表格 分页组件 (1)Pagination分页 (2)src/main.js 改中文 2.用户列表查询接口(idea的controller类) (1)userController类中的getUserListPage()方法--可以在不输入时查出全部,输入时查出一致的! (2)配置类中MpConfig设置分页拦截器 3.在前端中用户列表查询对接后端 (1)在src/api/userManage.js中编写 (2)在src/views/sys/user.vue中编写 七七八八的 4.新增接口与页面布局 (1).userController类中写方法addUser() (2).Dialog对话框,Switch开关-用户信息编辑对话框(src/views/sys/user.vue)中编写 七七八八的 5.表单验证 (1).Dialog对话框,用户信息编辑对话框(src/views/sys/user.vue)中编写 七七八八的 (2)Form表单-表单验证,用户信息编辑对话框(src/views/sys/user.vue)中编写 七七八八的 6.表单提交 (1)Form表单-表单验证,用户信息编辑对话框(src/views/sys/user.vue)中编写 七七八八的 (2)与后台提交接口进行对接(src/api/userManage.js)中进行对接addUser()方法 (3)Message消息提示src/views/sys/user.vue (4)Tag标签src/views/sys/user.vue 7.密码加密 (1)修改新增用户接口userController类的addUser方法 ,多加一条加密语句 (2)登录接口的Service层逻辑需要改变 UserServiceImpl 8.用户修改 (1)userController类中写updateUser()方法 (2)userController类中写getUserById()方法 (3)Button按钮-src/views/sys/user.vue 编写七七八八 (4)对接后端接口,在src/api/userManage.js中对接getUserById(),updateUser()方法 (5)在src/views/sys/user.vue 编写七七八八 (6)在src/api/userManage.js中新增saveUser()方法 (7)在src/views/sys/user.vue 编写七七八八 9.用户删除 (1)在userController类中写deleteUser()方法 (2)对接后端接口,在src/api/userManage.js中新增deleteUserById()方法 (3)在src/views/sys/user.vue 编写七七八八 (4)MessageBox弹框--在src/views/sys/user.vue 编写七七八八 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |