智慧养老项目

最新推荐文章于 2026-04-07 02:48:03 发布

原创最新推荐文章于 2026-04-07 02:48:03 发布 · 982 阅读

18 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#spring boot #vue.js

typora-root-url: F:\智慧养老图片

Day1：

1.创建Vue 项目，引入element-ui，axios,并且在main.js中引入该文件。

assets 文件夹放一些图片和html

components 放置组件

router 放置路由

views 中写代码

main.js 写全局配置

package.json 是依赖

2.创建springboot初始项目，导入mybatis,mysql,lombok,spring-web依赖。

3.设置application.properties属性:

server.port=9090
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/zhyl
spring.datasource.username=root
spring.datasource.password=123456
mybatis.mapper-locations=classpath:mapper/*Mapper.xml
mybatis.configuration.map-underscore-to-camel-case=true

4.创建zzyl数据库，建 user表和employee表.

5.创建user实体类,controller，service，mapper，mapper.xml 测试项目运行。

Day2:

实现用户的登录注册

1.创建java 包装类

2.解决前后端跨域问题，后端CorsConfig文件

3.前端设置axios配置，request.js 并在main.js中引入该文件

4.完善前端代码，实现登录，注册页面效果

5.登录：

// controller  用户登录
@PostMapping("/login")
public boolean dl(@RequestBody User user){
    User info = userService.getInfo(user);
    if (info == null){
        return  false;
    }else {
        return  true;
    }
}
//service
User getInfo(User user);
//impl
public User getInfo(User user) {
          String account = user.getAccount();
          String password = user.getPassword();

        User info = userMapper.getInfoByAccount(account);
        if (!Objects.equals(password, info.getPassword())){
            return null;
        }else {
            return info;
        }
    }
//mapper
    @Select("select * from user where account = #{account}")
    User getInfoByAccount(String account);

6.注册：

// controller 用户注册
@PostMapping("/register")
public void save(@RequestBody User user){
    userService.save(user);
}
//service
void  save(User user);
//Impl
    @Override
    public void save(User user) {
        String account = user.getAccount();
        String password = user.getPassword();
        String phone = user.getPhone();
        if (account !=null && password!=null &&phone!=null){
            userMapper.save(user);
        }
    }
//mapper
    @Insert("insert into user (account, password, email, phone) " +
            "VALUES" +
            " (#{account},#{password},#{email},#{phone})")
    void  save(User user);

在这里插入图片描述

Day3：

完成查询employee列表，根据id查询，修改，新增，删除，批量删除功能

1.完善前端代码，实现页面管理的网页效果

在这里插入图片描述

2.查询列表功能开发：

//controller
@GetMapping("/list")
public Result<List<Employee>> findAll(){
  List<Employee> list  = employeeService.findAll();
    return Result.success(list);
}
//service
 List<Employee> findAll();
//Impl
public List<Employee> findAll() {
    List<Employee>  list =   employeeMapper.findAll();
        return list;
    }
//mapper
    @Select("select * from employee")
    List<Employee> findAll();

3.根据id查询：

  //根据id查询
@GetMapping("{id}")
public  Result<Employee> selectById(@PathVariable Integer id){
    System.out.println(id);
   Employee employee =  employeeService.selectById(id);
    return  Result.success(employee);
} 
//     service
Employee selectById(Integer id);
//       Impl
       @Override
    public Employee selectById(Integer id) {
      Employee employee =  employeeMapper.selectByid(id);
        return employee;
    }
// mapper
    @Select("SELECT  * FROM employee WHERE id =#{id}")
    Employee selectByid(Integer id);

4.修改功能开发：

//修改
@PostMapping("/update")
public Result updateById(@RequestBody Employee employee){
    System.out.println(employee);
    int i =  employeeService.up(employee);
    if (i ==1){
        return Result.success(CodeEnum.SUCCESS) ;
    }else
    {
        return Result.success(CodeEnum.BAD_REQUEST);
    }
}
//service
 int up(Employee employee);
// impl
    @Override
    public int up(Employee employee) {
        int i =  employeeMapper.up(employee);
        return i;
    }

// mapper
  int up(Employee employee);
// mapper.xml
 <update id="up">
        update  employee
    <set>
        <if test="name !=null">
            name = #{name},
        </if>
        <if test="address !=null">
            address = #{address},
        </if>
        <if test="phone !=null">
            phone = #{phone},
        </if>
        <if test="job !=null">
            job = #{job},
        </if>
       <if test="time !=null">
         time = #{time},
        </if>
    </set>
        where id =#{id}
    </update>

5.新增功能：

//新增
@PostMapping("/add")
public Result add(@RequestBody Employee employee){
   int a =  employeeService.add(employee);
   if (a==1){
       return  Result.success(CodeEnum.SUCCESS);

   }else {
       return  Result.success(CodeEnum.BAD_REQUEST);
   }

}
//service
 int add(Employee employee);
//impl
  public int add(Employee employee) {
      int  a =     employeeMapper.add(employee);
        return a;
    }
//mapper
int add(Employee employee);
//mapper.xml
   <insert id="add">
        insert into  employee (name, address, phone, job, time) VALUES (#{name},#{address},#{phone},#{job},#{time})
    </insert>

6:删除功能

// 删除
@PostMapping("/del/{id}")
public Result delMore(@PathVariable Integer id){
    int a =     employeeService.del(id);
    if (a==1){
        return  Result.success(CodeEnum.SUCCESS);

    }else {
        return  Result.success(CodeEnum.BAD_REQUEST);
    }
}
//service
int del(Integer id);
//impl
    @Override
    public int del(Integer id) {
        int a =      employeeMapper.del(id);
        return a;
    }
//mapper
    @Delete("delete  from employee where id =#{id}")
    int del(Integer id);

7.批量删除：

@PostMapping("/del")
public Result delMore(@RequestBody List<Employee> employeeList){
   int a =     employeeService.delMore(employeeList);
    if (a>=1){
        return  Result.success(CodeEnum.SUCCESS);

    }else {
        return  Result.success(CodeEnum.BAD_REQUEST);
    }
}
// service
int delMore(List<Employee> employeeList);
// impl
   @Override
    public int delMore(List<Employee> employeeList) {
       int a =      employeeMapper.delMore(employeeList);
        return a;
    }
//mapper
int delMore(List<Employee> employeeList);
//mapper.xml
 <delete id="delMore">
        delete from employee where id in
        <foreach collection="employeeList" item="item" open="(" close=")" separator=",">
            #{item.id}
        </foreach>
    </delete>

Day4:

模糊查询，导入jwt完善前面登录注册，设置网络拦截器，实现分页查询。

1.模糊查询：

遇到问题：再写sql的时候，我写的是 concat(‘%’,#{name},‘%’) 导致查询错误。后来把# 改成$解决。有必要去复习一下 $和#的区别了

//模糊查询
@PostMapping("/sel")
public Result<List<Employee>> sel(@RequestBody String name){
    System.out.println(name);
      List<Employee> list   = employeeService.sel(name);
    System.out.println(list);
    return Result.success(list);
}
//service
List<Employee>  sel(String name);
//impl
  @Override
    public List<Employee> sel(String name) {
         List<Employee> list= employeeMapper.sel(name);
        return list;
    }
//mapper
List<Employee> sel(String name);
//mapper.xml
    <select id="sel" resultType="org.yeg.hd.entity.Employee">
        select * from employee where name like  concat('%',${name},'%')
    </select>

2.jwt token验证：

后端：

先引入jwt工具类：

import com.auth0.jwt.JWT;
import com.auth0.jwt.algorithms.Algorithm;


import java.util.Date;
import java.util.Map;

public class JWTUtils {

    /**
     * 接收数据，生成token  header.payload.signature
     */
    private static final String key = "yeg";

        public static String getToken(Map<String, Object> map) {
        return JWT.create()
                .withClaim("map",map)//生成token 的数据
                .withExpiresAt(new Date(System.currentTimeMillis() +1000 * 60 * 60 *12)) //设置token 限制时间
                .sign(Algorithm.HMAC256(key));//设置生成token的算法，key是密钥
    }

    /**
     *  解析token，获取信息
     */
    public static Map<String, Object>  parseToken(String token) {
        return JWT.require(Algorithm.HMAC256(key))//设置解析算法
                .build()
                .verify(token)
                .getClaim("map")
                .asMap();//转成map
    }
}

// controller 层 生成token 令牌
    // 用户登录
    @PostMapping("/login")
    public Result dl(@RequestBody User user){
        User info = userService.getInfo(user);
        if (info == null){
            return  Result.badRequest();
        }
        Map<String, Object> map = new HashMap<>();
        map.put("account",info.getAccount());
        map.put("password",info.getPassword());
        //生产token 令牌
        String token = JWTUtils.getToken(map);
        // 响应token
  return  Result.success(token);
    }

设置网络拦截器：1.拦截除登录，注册以外的请求

2.查看是否有请求头。

1.LogInterceptor类

package org.yeg.hd.Interceptors;

import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.HandlerInterceptor;
import org.yeg.hd.config.JWTUtils;

import java.util.Map;

@Component
public class LogInterceptor implements HandlerInterceptor {

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        //所有请求都在request方法里面
        String token = request.getHeader("Authorization");
        //解析 token  得到业务数据map
        try {
            Map<String, Object> map = JWTUtils.parseToken(token);
            //放行
            return  true;
        }catch (Exception e){
            //不放行  设置状态码401
            response.setStatus(401);
          return  false;
        }

    }
}

2.WebConfig类

package org.yeg.hd.config;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.yeg.hd.Interceptors.LogInterceptor;


@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Autowired
    LogInterceptor logInterceptor;

    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        //注册拦截器 设置登录注册接口 放行
        registry.addInterceptor(logInterceptor).excludePathPatterns("/user/login","/user/register");


    }
}

前端：

第一步，将前端获取到的token保存到本地浏览器

 // 登录页面
        async login() {
            let res =   await  this.$http.post("user/login", this.getform);
            console.log(res);
            if (res.status == 200)
                return (
                    this.$router.push("/home"),
                        localStorage.setItem('token', res.data), //将token设置到本地存储
                        this.$message.success("登录成功")
                );
            this.$message.error("登录失败");

        },

第二步，设置axios工具类，将token添加到请求头里

// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(config => {
    config.headers['Content-Type'] = 'application/json;charset=utf-8';

    let token= localStorage.getItem("token")
    if (token){
        config.headers['Authorization'] = token;  // 设置请求头
    }
    return config
}, error => {
    return Promise.reject(error)
});

3.分页查询：

方式1.使用pagehelper:

不知道为什么我使用这个插件没问题，但是每次查询出来的总是全部数据，没有进行分页。

但是它的PageInfo类的方法还是能调用。

坐标：

		<dependency>
			<groupId>com.github.pagehelper</groupId>
			<artifactId>pagehelper-spring-boot-starter</artifactId>
			<version>1.2.10</version>
		</dependency>

设置配置：

pagehelper.helper-dialect=mysql
pagehelper.reasonable=true
pagehelper.support-methods-arguments=true
pagehelper.params=count=countSql

   // 分页查询
   @GetMapping("/query")
public Result queryEmployee(    @RequestParam(value = "pageNum") Integer pageNum,
                                @RequestParam(value = "pageSize")Integer pageSize){
       PageHelper.startPage(pageNum,pageSize);
       List<Employee> employeeList = employeeService.findAll();
       PageInfo<Employee> employeePageInfo =new PageInfo<>(employeeList);
       return  Result.success(employeePageInfo);

方式2.引入mybatis.plus:

1.引入依赖：

		<dependency>
			<groupId>com.baomidou</groupId>
			<artifactId>mybatis-plus-boot-starter</artifactId>
			<version>3.5.5</version>
		</dependency>

2.引入分页工具类，官网有

@Configuration
public class MyBatisConfig {

    @Bean
    public MybatisPlusInterceptor paginationInterceptor(){
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));//如果配置多个插件,切记分页最后添加
        //interceptor.addInnerInterceptor(new PaginationInnerInterceptor()); 如果有多数据源可以不配具体类型 否则都建议配上具体的DbType
        return interceptor;
    }
}

3.EmployeeMapper 继续mybaits-plus的BaseMapper类，进行方法复用。

    // 分页查询
    @GetMapping("/query")
 public Result queryEmployee(    @RequestParam(value = "pageNum") Integer pageNum,
                                 @RequestParam(value = "pageSize")Integer pageSize){
        LambdaQueryWrapper<Employee> employeeLambdaQueryWrapper = Wrappers.lambdaQuery();
         Page<Employee> employeePage =new Page<>(pageNum,pageSize);
        IPage<Employee> employeeIPage =employeeService.selectPage(employeePage,employeeLambdaQueryWrapper);
     return  Result.success(employeeIPage);
     
     //service
         IPage<Employee> selectPage(Page<Employee> employeePage, LambdaQueryWrapper<Employee> employeeLambdaQueryWrapper);
    //impl
         @Override
    public IPage<Employee> selectPage(Page<Employee> employeePage, LambdaQueryWrapper<Employee> employeeLambdaQueryWrapper) {
        //直接调用BaseMapper的selectPage方法
        Page<Employee> employeePage1 = employeeMapper.selectPage(employeePage, employeeLambdaQueryWrapper);
        return employeePage1;
    }

前端：

  <div class="block">
            <el-pagination
                style="padding-top: 20px"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="params.pageNum"
                :page-sizes="[1, 2, 5, 10]"
                :page-size="params.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
     </div>


async getList(){
       await  this.$http.get("/employee/query",{params:this.params}).then(res=>{
        console.log(res)
           this.list =res.data.records
           this.total = res.data.total
        // console.log(this.list)
      })
    },
    handleSizeChange(val) {
      this.params.pageSize = val
       this.getList()
     },
    handleCurrentChange(val1) {
       this.params.pageNum =val1
        this.getList()
     }

 data() {
    return {
      form: {
        id:'',
        name:'',
        address:'',
        phone:"",
      },
      form1:{},
      list:[],
      dialogFormVisible: false,
      dialogFormVisible2:false,
      dialogVisible3: false,
      visible: false,
      multipleSelection:[],
      delId:'',
      name:'',
      params:{
        pageNum:1,
        pageSize:1,
      },
      total:0
    }
  }

Day5:

  })
},
handleSizeChange(val) {
  this.params.pageSize = val
   this.getList()
 },
handleCurrentChange(val1) {
   this.params.pageNum =val1
    this.getList()
 }

data() {
return {
form: {
id:‘’,
name:‘’,
address:‘’,
phone:“”,
},
form1:{},
list:[],
dialogFormVisible: false,
dialogFormVisible2:false,
dialogVisible3: false,
visible: false,
multipleSelection:[],
delId:‘’,
name:‘’,
params:{
pageNum:1,
pageSize:1,
},
total:0
}
}


## Day5:

### 导入，导出， 图片上传功能，修改个人资料。