Vue+Spring Boot 实现一个简单的Demo

相关技术栈

1.Vue-cli3+elementUI

2.Spring Boot

前端相关准备工作：

1.登录的页面布局

<template>
  <div class="login">
      <router-link to="/">Login</router-link> |
      <router-link to="/register">Register</router-link>
       <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
           <el-form-item label="用户名" prop="name">
             <el-input v-model="ruleForm.name"></el-input>
           </el-form-item>
           <el-form-item label="密码" prop="pwd">
             <el-input type="password" v-model="ruleForm.pwd"></el-input>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
             <el-button @click="resetForm('ruleForm')">重置</el-button>
           </el-form-item>
       </el-form>
  </div>
</template>

2.登录的js代码

<script>
export default {
  // name: 'home',
  data () {
    return {
      ruleForm: {
        name:'',
        pwd: ''
      },
      rules: {
        name: [{ required: true,  message :'请输入用户名',trigger: 'blur'}],
        pwd: [{ required: true,  message :'请输入密码',trigger: 'blur'}]
      }
    }
  },
  components: {
    // HelloWorld
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //this的作用域范围不同
          //this关键字的作用域问题引起的错误。。。
         var that=this

          // alert('submit');
          this.$ajax.post('http://localhost:8888/demo/login',{"name":this.ruleForm.name,"pwd":this.ruleForm.pwd})
            .then(function(res){
              console.log(res.data);
              //拿到json的数据：比如json串：{status: false, token: ""}，获取其中的status的值。就是用res.data.status来获取
              var status = res.data.status
              if(status === true){
                that.$router.push("/home")
              }
              console.log(status)
            })
            .catch(function (err) {
              console.log(err)
            })
        } else {
          console.log('error submit');
          return false
        }
      });
    },
    resetForm(formName){
      this.$refs[formName].resetField();
    }
  }
}
</script>

3.注册的页面布局

<template>
  <div class="login">
    <router-link to="/">Login</router-link> |
    <router-link to="/register">Register</router-link>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="用户名" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pwd">
      <el-input type="password" v-model="ruleForm.pwd"></el-input>
    </el-form-item>
      <el-form-item  label="确认密码" prop="repwd">
        <el-input type="password" v-model="ruleForm.repwd"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button class="button" type="primary" @click="submitForm('ruleForm')">注册</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

由于只是简单实现功能，所以对布局没有进行样式上的美化。

<style scoped>
  .button{
    width: 100%;
    margin-top: 20px;
  }


</style>

4.注册的js代码

<script>
export default {
  // name: 'home',
  data () {
    return {
      //第一步：先声明 第二步：在v-model绑定 第三步：this.ruleForm.pwd获取数据
      ruleForm: {
        name:'',
        pwd: '',
        repwd:''
      },
      rules: {
        name: [ { required: true,  message :'请输入用户名',trigger: 'blur'}],
        pwd: [ { required: true,  message :'请输入密码',trigger: 'blur'}],
        repwd: [ { required: true,  message :'请再次输入密码',trigger: 'blur'}]
      }
    }
  },
  components: {
    // HelloWorld
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {


        if (valid) {
          var that=this
          //一个等号是赋值，两个等号是比较，三个等号是强校验比较
          if(this.ruleForm.pwd==this.ruleForm.repwd){
            console.log('密码相等')
            this.$ajax.post('http://localhost:8888/demo/register',{"name":this.ruleForm.name,"pwd":this.ruleForm.pwd})
              .then(function(res){
                console.log(res.data);
                var status = res.data.status
                if(status === true){
                  that.$router.push("/register")
                }
              })
              .catch(function (err) {
                console.log(err)
              })
          }else{
            this.$message.error('两次密码不一致')
          }
          console.log('error submit');
          return false
        }
      });
    },
    resetForm(formName){
      this.$refs[formName].resetField();
    }
  }
}
</script>

5.弄一个home页面，登录成功之后跳转到home页面

<template>
   <div class="home">
     <h1>你好</h1>
   </div>
</template>

后端相关准备工作

1.写登录和注册的接口

@RestController
//RequestMapping是提供外部访问的URL地址块
@RequestMapping("demo")
//@CrossOrigin(origins = "*",allowCredentials="true",allowedHeaders = "",methods = {})
public class Controller {

    @Autowired
    private UserMapper userMapper;
    //------------------------------------------------------------------------------------------------------
    @RequestMapping(value = "login", consumes="application/json", method = RequestMethod.POST)
    public Map<String,Object> login(@RequestBody Map<String,Object> map){
        System.out.println("login");
        System.out.println(map.get("name").toString());
        System.out.println(map.get("pwd").toString());
        //定义name变量，保存前端传来的值，map.get("name")是获取前端的name值
        String name = (String)map.get("name");
        String pwd = (String)map.get("pwd");

        Map<String,Object> resultMap = new HashMap<>();

        List<User> list = userMapper.selectAll();

        for(int i = 0;i<list.size();i++){
            System.out.println(list.get(i).toString());
        }
        //判断
        if("admin".equals(name)&& "123456".equals(pwd)){
            resultMap.put("status",true);
            resultMap.put("token", UUID.randomUUID().toString().replaceAll("-",""));
        }else {
            resultMap.put("status",false);
            resultMap.put("token","");
        }
//        System.out.println("tessss");
        return resultMap;
    }

    //注册
    @RequestMapping(value = "register", consumes="application/json", method = RequestMethod.POST)
    public Map<String,Object> register(@RequestBody Map<String,Object> map){
        System.out.println("register");
        System.out.println(map.get("name").toString());
        System.out.println(map.get("pwd").toString());
        //定义name变量，保存前端传来的值，map.get("name")是获取前端的name值
        String name = (String)map.get("name");
        String pwd = (String)map.get("pwd");

        Map<String,Object> resultMap = new HashMap<>();
        resultMap.put("status",true);

        return resultMap;

    }
}

2.写增删改查的接口 （目前只写了增加和查询的接口）

1）增加用户接口

@Autowired
    private UserMapper userMapper;//操作数据库的类
    /**
     * 增加用户接口
     * @param map
     * @return
     */
    @RequestMapping(value = "add", consumes="application/json", method = RequestMethod.POST)
    public Map<String,Object> add(@RequestBody Map<String,Object> map){
        //打印预览前端传来的数据
        System.out.println(map.get("name").toString());
        System.out.println(map.get("age").toString());
        System.out.println(map.get("pwd").toString());
        System.out.println(map.get("email").toString());
        System.out.println(map.get("remark").toString());
        //步骤
        //1.获取前端传入用户
        //定义name变量，保存前端传来的值，map.get("name")是获取前端的name值
        String name = (String)map.get("name");
        String age = (String)map.get("age");
        String pwd = (String)map.get("pwd");
        String email = (String)map.get("email");
        String remark = (String)map.get("remark");

        //2定义一个用户类保存前端传来的数据
        User user = new User();
        user.setId(UUID.randomUUID().toString().replaceAll("-",""));
        user.setName(name);
        user.setAge(age);
        user.setPassword(pwd);
        user.setEmail(email);
        user.setRemark(remark);
        //4.定义结果map，给接口访问者返回添加是否成功信息信息
        Map<String,Object> resultMap = new HashMap<>();
        try{
            //3插入数据库,
            //insert是插入数据库
            //select是查询数据库 id
            //update是修改数据库 id + other
            //delete是删除数据库 id
            userMapper.insert(user);


            //给结果map添加一个返回状态,插入数据库成功时候返回true
            resultMap.put("status",true);
        }catch (Exception e){
            //插入数据库成功时候返回false
            resultMap.put("status",false);
            e.printStackTrace();
        }
        return resultMap;
    }

2)查询用户的接口

//查询接口
    /**
     * 查詢用户接口
     * @param map
     * @return
     */
    @RequestMapping(value = "select", consumes="application/json", method = RequestMethod.POST)
    public Map<String,Object> select(@RequestBody Map<String,Object> map){
        //打印预览前端传来的数据
        System.out.println(map.get("id").toString());
        //步骤
        //1.获取前端传入的id
        //定义name变量，保存前端传来的值，map.get("name")是获取前端的name值
        String id = (String)map.get("id");

        //2定义一个用户类保存前端传来的id
        User user = new User();
        user.setId(id);

        //4.定义结果map，给接口访问者返回添加是否成功信息信息
        Map<String,Object> resultMap = new HashMap<>();
        try{

            //select是查询数据库 id
            //步骤3：根据id查出数据
            //定义一个列表保存数据库返回的数据
            List list = userMapper.select(user);
            //打印查看数据库查出来的数据
            System.out.println(list.get(0).toString());

            //给结果map添加一个返回状态,插入数据库成功时候返回true
            resultMap.put("status",true);
            resultMap.put("user",list.get(0));
        }catch (Exception e){
            //插入数据库成功时候返回false
            resultMap.put("status",false);
            e.printStackTrace();
        }
        return resultMap;
    }