Soleil

前后端分离初体验

29 min read

前端三剑客

程序员就是复制粘贴，所以电脑笔记要多记，用到的时候就复制粘贴

Html+css 就是多抄，多练习，有手就会

Html

相对路径与绝对路径

Src，url，uri，href

本身就简单，不用记录，用到的时候查一查

本质就是搭积木

Css

Box-sizing

Overflow：hidden

响应式布局（太难了）

盒子模型

  1. 内边距
  2. 外边距都是上右下左，顺时针
  3. 边框
  4. 阴影
  5. 圆角 radius
  6. 内容

相对布局使用起来太麻烦了

所以用Flex 布局（套娃用）

整个网页不存在高度这个概念

当内部有元素填充的时候 max-height 与 max-width 以及 min 相关的属性才有用

定位

  1. Absolute
  2. Relative 上下移动行内元素（脱离文档流了）
  3. Fixed

无脑盒子+flex 布局

Js

Vue 就是对 js 的封装，直接学 vue 就行，js 的话之后有不懂的再看

对象与数组是最为重要的

对象的创建于增删改查

Let const var

赋值两种

  1. 。
  2. 方括号

Assign 是委派（深拷贝）复制的是值

两个对象直接相等是浅拷贝，就是复制的是引用

Js 对象和 json 对象在 js 中是一样的，但是这里面的 json 不是标准的 json 格式

解构语法

let {name} = user
console.log(name)

标准 json 格式

?.//用的比较多
||{} //通过或者来防止报错，用的比较多
??=
 
//数字当键的时候只能通过下面的去访问
let obj = {1:"ssss",2:"xxxx"}
console.log(obj[1])
 
== //不比较数据类型，只比较值
=== //既比较数据类型又比较值
 
//js中的debug方法
debugger

数组的增删改查

let arr = [] //创建数组
let arr = new Array() //万物皆可new一个
//插入
arr.push('xxx')
arr[1] = 'xxx' //此时arr[0]等于undefined，js中允许未定义的值存在，并且数组里面啥都可以存储
 
//查询，直接下标访问
 
//删除
arr.splice(3,1) //从第三个开始删除，删一个
arr.shift() //删除第一个
arr.pop() //删除最后一个
 
//截取数组
arr1 = arr.slice(1,2) //左闭右开
arr2 = arr.slice(x, n+1) //从x切到n
 
//合并数组
arr3 = arr2.contact(arr1) //把第一个数组放在前面，第二个数组放在后面合并
 
//切割字符
str.split(",") //按照逗号切割如果内部为空就是每个都分割
 
//合并
str.join('|') //跟括号内的合并
 
//sort中的坑
let sortArray = [1,2,10]
let newSortArray = sortArray.sort() //最后的结果是1,10,2,因为是根据unicode排序的
let newSortArray = sortArray.sort((a,b) => a-b) //这是正确的
 
//获取数值的下标
indexOf() //没有这个值就是-1
lastIndexOf()
 
//最常用的
let users = [ {name:'正三', age: 20}, {name:'荔枝汁',age:10}] //数组对象，数组里面存对象
 
let users2 = []
users.forEach(aaa => {
	if(aaa.age > 20){
	user2.push(aaa)
	}
})
//等同于
let users3 = users.filter(aaa => aaa.age>20)
 
filter()//还可以删除数组中的某一项 
 
let inx
users.forEach((item,index)=>{
	if(item.name === '正三'){
	inx = index
	}
})
users.splice(inx,1)
//等同于
users.filter(v=>v.name !== '正三')
 
find() //查找对象
findIndex() //查找下标
 
map() //跟Java中的stream流很像
//把对象数组变成普儿童的数组
 
reduce() //求和使用，非常适合处理数据

箭头函数要看一看

Json

Json. Cn 这个网站能看是否是合法 json

标准的 json

  1. Json 对象 {}
  2. Json 数组 []
{'name':'张三',"age":23,'man':true,"children":[{"name":"张思",age:1}]}
//标准json中的key必须是字符串，并且双引号包裹
//广义表，无限套娃

Vue 2

Vue 2 非常简单，做简单的项目，很好上手，适合做简单的项目

{{}}//响应式语法
 
v-html //渲染一个标签
v-model //双向绑定
 
//vue中的相应式语法中{{}}递增操作是不允许的
 
v-if //判定
v-else
v-else-if
 
v-bind //绑定属性,很好用，切换用户的时候，一些信息也跟着切换，简写：
v-on //绑定事件 简写@
v-for //循环 通过数组去渲染 也可以渲染对象
<div v-for= "(item,index) in fruits" :key="item">{{index}}</div>
 
在methods中写方法
 
动态绑定class 动态绑定style 都是class或者style前面加：

Vue 脚手架搭建

使用 Vue CLI 搭建脚手架

工程化的框架（有 IP，有端口号）

路由切换

Components 是把一个页面内容浓缩到一个标签里面

地址栏的切换就是路由

热更新

@表示 src 的路径，写相对位置就是@/来写

  • 要梳理一下 vue 框架的目录格式

Git

我的痛点中的痛点，每次都是迷迷糊糊的解决一些 git 冲突问题，不是说特别懂得就能解决问题。

Rebase 基于这个再新增

Merge 一般用 merge 合并

先更新远程仓库的代码到本地，再提交（一致性原理）

Git stash 独立分支暂存

Git pop 弹出来

Cherry-pick 能把提交给另外的分支（另外的分支指的是 checkout 的分支，也就是选中的分支）

解决冲突要好好学习下

ElementUI

elementUI 官网

学一种布局的思路，el-cow，el-row，一行分成 24 列。做布局的时候就分成一个一个小格子

El-button

多学多看多练

Form El-input 必须使用 vmodel，没有输入不了 Prefix-icon 前面加图标 Suffix-icon 后面加图标

搜索建议（建议表单） 值必须得有 value

单选 多选

时间（一定要有 value-format 属性） el-data-picker

表格 el-table

Dialog

Es 6 写法

前端的写法就是盒子模型+flex 布局

当且仅当 el-menu-item 内部写 index 才会生效

!important 强制生效

用 F 12 计算让子对齐，所以前端是真的没意思。

ElementUI 归根结底是 css 的封装，最后还是 css，有各种的类，不是标签，虽然我们 ElementUI 用的时候使用的是什么 el-什么的标签，但是到最后是 css 中的类，所以要熟练使用 F 12 来看到底是什么类，个人化的话就还是得写 css，对类进行微调。

弹性布局

自定义 icon 用阿里巴巴矢量库

还可以设置主题色

SpringBoot

Maven

现在 springboot 最低支持 java 17 了

我现在学的是 2 x

Lombok 不用再写 get 和 set 方法了，使用注解搞定

开始的时候要右键 pom. Xml 文件，把它添加为 maven 文件

首先看编码，是不是 utf-8，这很重要

#if (${PACKAGE_NAME} && ${PACKAGE_NAME} != "")package ${PACKAGE_NAME};#end  
#parse("File Header.java")  
public class ${NAME} {  
}

Controller 中使用的是 json 对象，而不是 json 数组

所有接口的返回格式都是 result 对象

在本地开发的时候一般都是用 debug 模式去启动。

Http 学习

是一种协议，让前端与后端进行连接

常规

  1. 请求 URL
  2. 请求方法
  3. 状态代码
  4. 远程地址
  5. 引荐来源网址政策（还是挺重要的）

响应标头

请求标头

前后端联动的本质就是如何拿到字符串

其实就是与增删改查相联系，get 是查，post 是增，delete 是删，put 是改 接口类型

  1. Post 接口用于新增数据，传输 json 数据
  2. Put 接口跟 post 差不多，用于更新
  3. Delete 接口用来删除数据，可以传 json，用来批量删除
  4. Get 接口用 url 数据

HTTP 状态码 405 错误就是接口类型写错了，浏览器地址栏不能发送 post 请求 400 错误是接口参数错误，例如说需要传一个 json 但是传了一个 url 参数 404 接口路径写错了 500 后台出错，出错后第一时间看控制台，肯定是程序写错了

1 级路由以及 2 级路由

小白一定要多试，多实验才能记牢固

什么是注入容器

MyBatis

做增删改查

硬核

Mapper 是存放 mybatis 接口的地方

写从 controller→service →mapper

逻辑倒过来

Idea 代码格式化快捷键是 ctrl+alt+L

小白学习一定要从简单开始，效率是大神考虑的事情。

Ctrl+alt+左右键可以返回之前写代码的位置

运行逻辑是 mapper 里面先执行 sql 语句，然后把参数交给 mapper 的方法，然后给 service 处理

然后回到 controller，最后给前端（其实我完全说反了）

这一节使用 postman 来测试请求，测试 api 接口

半自动化

Mapper

package com.example.springboot.mapper;  
  
import com.example.springboot.entity.User;  
import org.apache.ibatis.annotations.*;  
  
import java.util.List;  
  
/**  
* 功能：MyBatis的UserMapper接口，把user对象插入到数据库中  
* 作者：索莱尔  
* 日期：2024-07-10 21:11  
*/  
@Mapper  
public interface UserMapper {  
  
@Insert("insert into user(username,password,name,phone,email,address,avatar,role) " +  
"values(#{username},#{password},#{name},#{phone},#{email},#{address},#{avatar},#{role})")  
//这里的#{}是占位符,通过反射机制，将user对象的属性值赋值给sql语句中的占位符，这里id是自增的，不用管。使用到了反射机制  
void insertUser(User user);  
  
@Update("update user set username=#{username},password=#{password},name=#{name},phone=#{phone},email=#{email}," +  
"address=#{address},avatar=#{avatar} where id=#{id}")  
//必须要有id，否则不知道修改哪个用户  
int updateUser(User user);  
  
  
@Delete("delete from user where id=#{id}")  
void deleteUser(Integer id);  
  
// @Delete("delete from user where id in (${ids})") //这里的${}是字符串拼接，不是占位符,${ids}是mybatis的foreach标签  
// void batchDeleteUser(List<Integer> ids); //好像不能这样写,会出现500错误  
@Select("select * from user order by id desc")  
List<User> selectAll();  
  
@Select("select * from user where id=#{id}")  
User selectById(Integer id);  
  
@Select("select * from user where name=#{name} order by id desc")  
List<User> selectByName(String name);  
  
  
@Select("select * from user where username=#{username} and name=#{name} order by id desc")  
List<User> selectByMore(@Param("username") String username, @Param("name") String name);  
// List<User> selectByMore(String username, String name); //会出现找不到参数的错误  
  
@Select("select * from user where username like concat('%',#{username},'%') and name like concat('%',#{name},'%')" +  
" order by id desc")  
List<User> selectByMoreLike(@Param("username") String username, @Param("name") String name);  
  
@Select("select * from user where username like concat('%',#{username},'%') and name like concat('%',#{name},'%')" +  
" order by id desc limit #{skipNum}, #{pageSize}")  
List<User> selectByPage(@Param("username") String username, @Param("name") String name,  
@Param("skipNum") Integer skipNum, @Param("pageSize") Integer pageSize); //这里的param里的内容必须符合sql语句中的占位符  
  
@Select("select count(id) from user where username like concat('%',#{username},'%') and name like concat('%',#{name},'%')" +  
" order by id desc")  
int selectCount(@Param("username") String username, @Param("name") String name);  
  
@Select("select * from user where username=#{username}")  
User selectByUsername(String username);  
}

Service

package com.example.springboot.service;  
  
import cn.hutool.core.util.RandomUtil;  
import com.example.springboot.common.Page;  
import com.example.springboot.entity.User;  
import com.example.springboot.exception.ServiceException;  
import com.example.springboot.mapper.UserMapper;  
import com.example.springboot.utils.TokenUtils;  
import org.springframework.beans.factory.annotation.Autowired;  
import org.springframework.stereotype.Service;  
  
import java.util.List;  
  
/**  
* 功能：其实应该写个接口，继承的，这里为了简单，直接写实现类  
* 作者：索莱尔  
* 日期：2024-07-10 21:25  
*/  
@Service  
public class UserService {  
  
@Autowired  
private UserMapper userMapper;  
  
public void insertUser(User user){  
userMapper.insertUser(user);  
}  
  
public int updateUser(User user){  
userMapper.updateUser(user);  
return userMapper.updateUser(user);  
}  
  
public void deleteUser(Integer id){  
userMapper.deleteUser(id);  
}  
  
public void batchDeleteUser(List<Integer> ids) {  
// userMapper.batchDeleteUser(ids);  
for (Integer id : ids){ //等同于上面的  
userMapper.deleteUser(id);  
}  
}  
  
public List<User> selectAll() {  
return userMapper.selectAll();  
}  
  
public User selectById(Integer id) {  
return userMapper.selectById(id);  
}  
  
public List<User> selectByName(String name) {  
return userMapper.selectByName(name);  
}  
  
public List<User> selectByMore(String username, String name) {  
return userMapper.selectByMore(username, name);  
}  
  
public List<User> selectByMoreLike(String username, String name) {  
return userMapper.selectByMoreLike(username, name);  
}  
  
public Page<User> selectByPage(String username, String name, Integer pageNum, Integer pageSize) {  
Integer skipNum = (pageNum - 1) * pageSize;  
List<User> users = userMapper.selectByPage(username, name, skipNum, pageSize);  
int count = userMapper.selectCount(username,name);  
Page<User> result = new Page<>();  
result.setTotal(count);  
result.setList(users);  
return result;  
}  
  
//验证用户账号是否合法  
public User login(User user) {  
User dbuser = userMapper.selectByUsername(user.getUsername());  
if(dbuser == null){  
//抛出一个自定义的异常  
throw new ServiceException("用户名或密码错误");  
}  
if(!user.getPassword().equals(dbuser.getPassword())){  
throw new ServiceException("用户名或密码错误");  
}  
//生成token  
String token = TokenUtils.createToken(dbuser.getId().toString(),dbuser.getPassword());  
dbuser.setToken(token);  
return dbuser;  
}  
  
public User register(User user) {  
User dbuser = userMapper.selectByUsername(user.getUsername());  
if(dbuser != null){  
throw new ServiceException("用户名已存在");  
}  
user.setName("kong-gu" + RandomUtil.randomNumbers(5));  
userMapper.insertUser(user);  
return user;  
}  
  
public void resetPassword(User user) {  
User dbuser = userMapper.selectByUsername(user.getUsername());  
if(dbuser == null){  
throw new ServiceException("用户不存在");  
}  
if(!user.getPhone().equals(dbuser.getPhone())){  
throw new ServiceException("手机号错误");  
}  
dbuser.setPassword("123456"); //重置密码  
userMapper.updateUser(dbuser);  
}  
}

Controller

package com.example.springboot.controller;  
  
import com.example.springboot.common.Page;  
import com.example.springboot.common.Result;  
import com.example.springboot.entity.User;  
import com.example.springboot.service.UserService;  
import org.springframework.beans.factory.annotation.Autowired;  
import org.springframework.dao.DuplicateKeyException;  
import org.springframework.web.bind.annotation.*;  
  
import java.util.List;  
  
/**  
* 功能：controller层,是与前端交互的层  
* 作者：索莱尔  
* 日期：2024-07-10 21:26  
*/  
@CrossOrigin //解决跨域问题，前后端分离时，前端和后端不在同一个服务器上，所以会有跨域问题；服务器同源策略，不同源的服务器不能相互访问，协议，ip，端口号有一个不同就是不同源  
@RestController  
@RequestMapping("/user")  
public class UserController {  
  
@Autowired //使用@service注入spring容器后，再使用autowired去拿数据  
private UserService userService;  
  
/**  
* 功能：添加用户  
*/  
@PostMapping("/add")  
public Result addUser(@RequestBody User user){  
try {  
userService.insertUser(user);  
}catch (Exception e) {  
if(e instanceof DuplicateKeyException){ //这里被spring接管了，所以要用spring的异常，不能再用sql的异常例如SQLException  
return Result.error("数据插入错误");  
}else {  
return Result.error("系统错误");  
}  
}  
return Result.success();  
}  
  
  
/**  
* 修改用户信息  
*/  
@PutMapping("/update")  
public Result updateUser(@RequestBody User user){  
try {  
int updatedRows = userService.updateUser(user);  
if(updatedRows == 0){  
return Result.error("未找到用户，更新失败");  
}  
}catch (Exception e) {  
if(e instanceof DuplicateKeyException){  
return Result.error("数据修改错误");  
}else {  
return Result.error("系统错误");  
}  
}  
return Result.success();  
}  
  
/**  
* 单个删除用户  
*/  
@DeleteMapping("/delete/{id}")  
public Result deleteUser(@PathVariable Integer id){  
try {  
userService.deleteUser(id);  
}catch (Exception e) {  
return Result.error("系统错误");  
}  
return Result.success();  
}  
  
/**  
* 批量用户删除  
*/  
@DeleteMapping("/delete/batch")  
public Result batchDeleteUser(@RequestBody List<Integer> ids){  
userService.batchDeleteUser(ids);  
return Result.success();  
}  
  
/**  
* 查询全部用户信息  
*/  
@GetMapping("/selectAll")  
public Result selectAll(){  
List<User> users = userService.selectAll();  
return Result.success(users);  
}  
  
/**  
* 根据Id查询单个用户信息  
*/  
  
@GetMapping("/selectById/{id}")  
public Result selectById(@PathVariable Integer id){  
User user = userService.selectById(id);  
return Result.success(user);  
}  
  
/**  
* 根据name查询用户信息  
* 如果不确定返回几个对象，就返回list对象，最为稳妥  
*/  
  
@GetMapping("/selectByName/{name}")  
public Result selectByName(@PathVariable String name){  
List<User> users = userService.selectByName(name); //这里name不唯一，所以返回的是list  
return Result.success(users);  
}  
  
  
/**  
* 根据username和name查询用户信息  
*/  
  
@GetMapping("/selectByMore")  
public Result selectByUsernameAndName(@RequestParam String username,@RequestParam String name){  
List<User> users = userService.selectByMore(username, name);  
return Result.success(users);  
}  
  
/**  
* 多条件模糊查询  
*/  
@GetMapping("/selectByMoreLike")  
public Result selectByMoreLike(@RequestParam String username,@RequestParam String name){  
List<User> users = userService.selectByMoreLike(username, name);  
return Result.success(users);  
}  
  
/**  
* 分页多条件模糊查询  
* pageNum为当前页码  
* pageSize为每页显示的数量  
*/  
  
@GetMapping("/selectByPage")  
public Result selectByPage(@RequestParam String username,@RequestParam String name,  
@RequestParam Integer pageNum,@RequestParam Integer pageSize){  
Page<User> pageMap = userService.selectByPage(username, name, pageNum, pageSize);  
return Result.success(pageMap);  
}  
  
}

Axios

封装 http 请求工具 js, 就是 request

Json 数据

登录注册页面开发

集成 jwt token 实现验证

Jwt 就是 json web token

自定义注解

Spring security 比较专业，适合大型项目。 毕设就是一个 demo 作品。

什么是 Bean

什么又是 Bean 的依赖注入原则？

得好好学学注解是什么

自定义注解就是为了放行某一个接口。

还有种方法，在拦截器里面，是放行多个相似的端口。

上传下载文件

太大了也没法上传，接口会报错，因为有限制。

在 application. Yml 中进行配置，可更改上传与下载的最大值。

单文件上传

<template>  
<div>  
<div>  
<el-card style="width: 100%">  
<div slot="header" class="clearfix">  
<span>渲染用户数据</span>  
</div>  
<div>  
<el-table :data="users">  
<el-table-column label="ID" prop="id"></el-table-column>  
<el-table-column label="用户名" prop="username"></el-table-column>  
<el-table-column label="姓名" prop="name"></el-table-column>  
<el-table-column label="地址" prop="address"></el-table-column>  
<el-table-column label="文件上传">  
<template v-slot="scope">  
<el-upload  
action="http://localhost:9090/file/upload"  
:headers="{token: user.token}"  
:show-file-list="false"  
:on-success="(res,file,fileList,row)=>handleTableFileUpload(res,file,fileList,scope.row)">  
<el-button size="mini" type="primary">单文件上传</el-button>  
</el-upload>  
</template>  
</el-table-column>  
<el-table-column label="头像">  
<template v-slot="scope">  
<el-image v-if="scope.row.avatar" :src="scope.row.avatar" style="width: 50px;height: 50px"></el-image>  
</template>  
</el-table-column>  
</el-table>  
</div>  
</el-card>  
</div>  
  
<div style="display: flex; margin: 10px 0;">  
<el-card style="width: 50%">  
<div slot="header" class="clearfix">  
<span>文件上传下载</span>  
</div>  
<div>  
<el-upload  
action="http://localhost:9090/file/upload"  
:headers="{token: user.token}"  
list-type="picture"  
:on-success="handleFileUpload">  
<el-button size="mini" type="primary">单文件上传</el-button>  
</el-upload>  
</div>  
  
<div style="margin: 10px 0">  
<el-upload  
action="http://localhost:9090/file/upload"  
:headers="{token: user.token}"  
:on-success="handleMultipleFileUpload"  
multiple>  
<el-button size="mini" type="primary">多文件上传</el-button>  
</el-upload>  
</div>  
</el-card>  
</div>  
</div>  
</template>  
  
<script>  
  
import request from "@/utils/request";  
  
export default{  
name: "User",  
data(){  
return{  
user: JSON.parse(localStorage.getItem('soleilwin') || '{}'),  
users:[]  
}  
},  
mounted() {  
request.get('/user/selectAll').then(res =>{  
this.users = res.data  
})  
},  
methods:{  
handleMultipleFileUpload(response, file, fileList){  
let urls = fileList.map(v => v.response?.data)  
console.log(urls)  
},  
handleTableFileUpload(response, file, fileList,row){  
console.log(response, file, fileList,row)  
// row.avatar = response.data  
this.$set(row, 'avatar', response.data)  
//触发更新  
request.put('/user/update', row).then(res =>{  
if(res.code === '200'){  
this.$message.success("上传成功")  
}  
else {  
this.$message.error(res.msg)  
}  
})  
},  
handleFileUpload(response, file, fileList){  
this.fileList = fileList  
},  
}  
}  
</script>  
  
<style scoped>  
  
</style>

多文件上传

就是把单文件的结果进行了合并

下载

下载就是头不一样 content-disposition 是 attachment

预览

Inline

疑问

钩子是什么东西

Vue 多角色登录

Router-vue

添加子路由指向 home 页面

路由守卫解决用户页面权限问题

忘记密码

/deep/穿透有什么用处？

:headers 注意了

还有就是绑定的事情：还是 vue 学的不好，找 bug 找了半天

表格的增删改查

Mybatis-plus

简介 | MyBatis-Plus (baomidou.com)

国产的

Mybatis 的增强工具，能简化开发。

添加注解

看看配置页面。

全局注解 mapper

Mapper

//改造后的mapper
package com.example.springboot.mapper;  
  
import com.baomidou.mybatisplus.core.mapper.BaseMapper;  
import com.example.springboot.entity.User;  
  
/**  
* 功能：MyBatis的UserMapper接口，把user对象插入到数据库中  
* 作者：索莱尔  
* 日期：2024-07-10 21:11  
*/  
  
public interface UserMapper extends BaseMapper<User> {  
  
}

Service

package com.example.springboot.service;  
  
import cn.hutool.core.util.RandomUtil;  
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;  
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;  
import com.example.springboot.entity.User;  
import com.example.springboot.exception.ServiceException;  
import com.example.springboot.mapper.UserMapper;  
import com.example.springboot.utils.TokenUtils;  
import org.springframework.stereotype.Service;  
  
import javax.annotation.Resource;  
  
/**  
* 功能：其实应该写个接口，继承的，这里为了简单，直接写实现类  
* 作者：索莱尔  
* 日期：2024-07-10 21:25  
*/  
@Service  
public class UserService extends ServiceImpl<UserMapper,User> {  
  
@Resource //这个注解是spring的注解，用来注入对象  
private UserMapper userMapper; //这个是mybatis-plus的接口，用来操作数据库  
  
public User selectByUsername(String username){  
QueryWrapper<User> queryWrapper = new QueryWrapper<>(); //这个是mybatis-plus的查询条件构造器  
queryWrapper.eq("username",username);  
return getOne(queryWrapper);  
}  
  
//验证用户账号是否合法  
public User login(User user) {  
User dbuser = selectByUsername(user.getUsername());  
if(dbuser == null){  
//抛出一个自定义的异常  
throw new ServiceException("用户名或密码错误");  
}  
if(!user.getPassword().equals(dbuser.getPassword())){  
throw new ServiceException("用户名或密码错误");  
}  
//生成token  
String token = TokenUtils.createToken(dbuser.getId().toString(),dbuser.getPassword());  
dbuser.setToken(token);  
return dbuser;  
}  
  
public User register(User user) {  
User dbuser = selectByUsername(user.getUsername());  
if(dbuser != null){  
throw new ServiceException("用户名已存在");  
}  
user.setName("kong-gu" + RandomUtil.randomNumbers(5));  
userMapper.insert(user);  
return user;  
}  
  
public void resetPassword(User user) {  
User dbuser = selectByUsername(user.getUsername());  
if(dbuser == null){  
throw new ServiceException("用户不存在");  
}  
if(!user.getPhone().equals(dbuser.getPhone())){  
throw new ServiceException("手机号错误");  
}  
dbuser.setPassword("123456"); //重置密码  
updateById(dbuser);  
}  
}

Controller

package com.example.springboot.controller;  
  
import cn.hutool.core.util.StrUtil;  
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;  
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;  
import com.example.springboot.common.Result;  
import com.example.springboot.entity.User;  
import com.example.springboot.service.UserService;  
import org.springframework.beans.factory.annotation.Autowired;  
import org.springframework.dao.DuplicateKeyException;  
import org.springframework.web.bind.annotation.*;  
  
import java.util.List;  
  
/**  
* 功能：controller层,是与前端交互的层  
* 作者：索莱尔  
* 日期：2024-07-10 21:26  
*/  
@CrossOrigin //解决跨域问题，前后端分离时，前端和后端不在同一个服务器上，所以会有跨域问题；服务器同源策略，不同源的服务器不能相互访问，协议，ip，端口号有一个不同就是不同源  
@RestController  
@RequestMapping("/user")  
public class UserController {  
  
@Autowired //使用@service注入spring容器后，再使用autowired去拿数据  
private UserService userService;  
  
/**  
* 功能：添加用户  
*/  
@PostMapping("/add")  
public Result addUser(@RequestBody User user){  
try {  
userService.save(user);  
}catch (Exception e) {  
if(e instanceof DuplicateKeyException){ //这里被spring接管了，所以要用spring的异常，不能再用sql的异常例如SQLException  
return Result.error("数据插入错误");  
}else {  
return Result.error("系统错误");  
}  
}  
return Result.success();  
}  
  
  
/**  
* 修改用户信息  
*/  
@PutMapping("/update")  
public Result updateUser(@RequestBody User user){  
try {  
boolean updatedRows = userService.updateById(user); //boolean是类型，Boolean是包装类，两者的区别是boolean是基本数据类型，Boolean是引用数据类型  
if(updatedRows){  
return Result.error("未找到用户，更新失败");  
}  
}catch (Exception e) {  
if(e instanceof DuplicateKeyException){  
return Result.error("数据修改错误");  
}else {  
return Result.error("系统错误");  
}  
}  
return Result.success();  
}  
  
/**  
* 单个删除用户  
*/  
@DeleteMapping("/delete/{id}")  
public Result deleteUser(@PathVariable Integer id){  
try {  
userService.removeById(id);  
}catch (Exception e) {  
return Result.error("系统错误");  
}  
return Result.success();  
}  
  
/**  
* 批量用户删除  
*/  
@DeleteMapping("/delete/batch")  
public Result batchDeleteUser(@RequestBody List<Integer> ids){  
userService.removeBatchByIds(ids);  
return Result.success();  
}  
  
/**  
* 查询全部用户信息  
*/  
@GetMapping("/selectAll")  
public Result selectAll(){  
List<User> users = userService.list(new QueryWrapper<User>().orderByDesc("id")); //等于select * from user order by id desc  
return Result.success(users);  
}  
  
/**  
* 根据Id查询单个用户信息  
*/  
  
@GetMapping("/selectById/{id}")  
public Result selectById(@PathVariable Integer id){  
User user = userService.getById(id);  
return Result.success(user);  
}  
  
  
/**  
* 分页多条件模糊查询  
* pageNum为当前页码  
* pageSize为每页显示的数量  
*/  
  
@GetMapping("/selectByPage")  
public Result selectByPage(@RequestParam String username,@RequestParam String name,  
@RequestParam Integer pageNum,@RequestParam Integer pageSize){  
QueryWrapper<User> queryWrapper = new QueryWrapper<User>().orderByDesc("id");  
queryWrapper.like(StrUtil.isNotBlank(username),"username",username);  
queryWrapper.like(StrUtil.isNotBlank(name),"name",name);  
Page<User> page = userService.page(new Page<>(pageNum, pageSize), queryWrapper);  
return Result.success(page);  
}  
  
}

基本都是通过 Iservice 继承过来的方法，不用自己写方法

ConfigServletWebServerApplicationContext

 Spring Boot 中的一个类，它扩展了 ServletWebServerApplicationContext。它的主要作用是在 Spring Boot 应用程序启动过程中，负责配置嵌入式的 Servlet Web 服务器（如 Tomcat、Jetty 或 Undertow）的上下文。这个类是 Spring Boot 内部使用的，用于初始化和配置 Web 环境，包括注册 Servlet、Filter 和所有相关的 Web 配置。

如果你遇到了与 ConfigServletWebServerApplicationContext 相关的问题，这通常意味着在初始化 Web 应用程序上下文或配置嵌入式 Web 服务器时出现了问题。这可能是由于多种原因造成的，比如：

  • 配置错误：比如 application.properties 或 application.yml 文件中的配置项不正确。
  • 依赖问题：可能是缺少必要的依赖，或者依赖版本冲突。
  • Bean 创建失败：Spring Boot 在启动过程中创建或初始化 Bean 失败。

解决这类问题通常需要查看应用程序的启动日志，找到具体的错误信息或异常堆栈，然后根据错误信息进行调试和修复。

Token expired

Token 失效了, 因为有个时间的问题，所以说会出现。 同时也可能伴随别的问题，所以出现这个记得把控制台给清空了，不然还会以为是 token 失效导致的问题。

数据库问题

有些非空的数据，记得给默认的值，不然就一直报错，而且没有提示。

弦外之音

错误不可怕，甚至是一笔宝贵的资产，要学会去解决错误。

获取行

handleSelectionChange(rows){  
let ids = rows.map(v => v.id)  
}

这行代码不太懂

调用错误

重写调用的包里面的方法的时候，记得要看好参数列表，有时候是不同的。

数据库逻辑写到哪里

我现在认为是写在 controller 里面，比较好。 因为 service 还是要回到 controller 中的。

数据的批量导出和导出

通过输入输出流来进行。

Hutool 里面有个 ExcelWriter

Poi-ooxml 依赖可能有问题，使用 maven 里面 lifecycle 先 clean 再 compile

根据搜索条件部分导出，注意前端要穿过来参数。

List<Integer> idsArr = Arrays.stream(ids.split(",")).map(Integer::valueOf).collect(Collectors.toList()); //将字符串转换为数组，再转换为list
e.printStackTrace(); //有什么用处？

部署

先配置网络环境，因为之前很多都写死了网络地址，都是 localhost：9090，所以要改改，快速更改的方法是，右键文件，选择 find in files，然后更改就行，直接就能够改。

就着就是打包

前端工程打包

用控制台，cd vue

npm run build

打包完后是在 vue 下面的 dist 文件夹。

后台打包

使用 maven 的小工具，

先 clean

然后再 package

打包完是在 springboot 的 target 文件夹

放入服务器

放 jar 包，jar 包外面还可以放 resources 里面的 application. Yml，用以覆盖 jar 内部已经有的。

需要有启动和停止脚本。

然后赋权

ll # 查看权限，红色的白色的权限都低，绿色的最高
chmod +x *

配置环境

安装包放到 tmp 里面

安装 jdk

tar -zxvf /tmp/jdk-8u411-linux-x64.tar.gz -C /usr/local

改个名字，太长不太好虽说 tab 能补全。

mv jdk1.8.0_411 java8

配置 java 的环境变量

vi /etc/profile
export JAVA_HOME=/usr/local/java8
export PATH=$JAVA_HOME/bin:$PATH

Mysql 我已经安装过了。

安装 Nginx

yum install gcc-c++
yum install -y pcre pcre-devel
yum install -y zlib zlib-devel
yum install -y openssl openssl-devel
tar -zxvf /tmp/nginx-1.26.1.tar.gz -C /usr/local/nginx/

编译安装

./configure --with-http_stub_status_module --with-http_ssl_module

安装

make && make install

这行代码有什么用？

Nginx 的重定向

try_files $uri $uri/ /index.html;

然后连接数据库，把数据库导入到服务器的数据库中。

可能会出现问题，尤其是 8.0 向 5.7 导入。

都要更改

 java.sql.SQLException: Access denied for user 'root'@'localhost' (using password: YES)

有可能出现这个问题，

打开 application，看看密码有没有写错。

Graph View