SpringBoot+Vue 实现简单的：登录、注册、查看详情、商品页面、购物车功能

【私藏多年的绝版资料，现在免费送给你，随时会被删除，千万保存下来！有道云笔记】

 一、用户登录界面

实现思路：用户在界面输入用户名和密码传入变量。用post方法传输到后端，后端接收整个实体对象。将用户名提取出。在dao层方法中通过select注解查询，返回数据库对应的数据对象。如果返回为空则return false。不为空则通过比对数据库返回的密码和用户输入的密码，如果二者匹配则return true，否则return false。在前端axios框架中，通过if语句判断，如果return true则提示登录成功信息，跳转到首页。如果return false则提示登录失败请重试。

效果：

改进思路：

已实现：

用cookie记住用户的登录状态。1. 在首页上方显示“欢迎xxx登录！！”字样，xxx必须根据用户名动态变化。2. 个人中心状态区分，已登录状态在右上角显示“个人中心”，个人中心下拉显示“退出登录”；未登录则显示“登录”，无个人中心。3. 实现退出登录的功能。4.设置一个具有权限的页面（购物车），如果未登录页面上方弹窗显示“权限不足，请登录”，如果已登录则可以正常浏览页面内容。5. 对登录的用户名和密码进行加密，接收端进行解密匹配。

1.1 初始版本

第1步：dao层编写如下代码：

@Select("select * from tb_user where username=#{username}" )
public User login(String username);

第2步： controller层编写如下代码：

@RestController
@RequestMapping("/api/")
public class DataController {
    @PostMapping("login")
    public boolean loginmodule(@RequestBody User user){
        System.out.println(user.getUsername());
        System.out.println(user.getPassword());
        User u = bookDao.login(user.getUsername());
        if(u==null) return false;
        System.out.println(u.getPassword());
        if(user.getPassword().equals(u.getPassword())) return true;
        else return false;
    }
}

第3步：编写请求代码：

methods: {
  login() {
     axios.post("/api/login",this.form).then((response)=>{
     if(response.data==true) {
         confirm('登录成功!');
         window.location.href="https://blog.csdn.net/home.html";
     }
     else alert('用户名或密码错误，请重试！');
   })
 },
}

第4步： 编写登录界面，定义变量：

登录界面：

<!--登录界面-->
<h1 style="margin-left:125px;color: #333333">登录</h1>
<el-form ref="form" :model="form" label-width="80px" style="margin-top: 30px">
    <el-form-item label="用户名">
        <el-input v-model="form.username" style="width: 200px;"></el-input>
    </el-form-item>
    <el-form-item label="密码">
        <el-input v-model="form.password" style="width: 200px;"></el-input>
    </el-form-item>
    <div style="margin-left: 200px;margin-bottom: 15px"><el-link type="primary" @click="register" >点击注册</el-link></div>
    <el-form-item>
        <el-button type="primary" @click="login">登录</el-button>
        <el-button>取消</el-button>
    </el-form-item>
</el-form>

定义变量： 

data() {