好像是19年底时,Evan的白卷项目出了十几章教程了,才开始正式的学习前后端分离。但是在工作中前后端分离始终与我无缘啊。断断续续用了好久时间把白卷的20多章都做完了,真的用了好久,因为好多技术栈都不知道是啥,基本就是一坑一踩。这次跟着教程再做二次开发还算顺利,晚上用了2个小时吧,就把01-05章写(贴)完了,第一次是写着玩,这次是玩着写😧 ,看来速推不是梦啊,简单记下这次遇到的坑吧,以后方便看(jpa的坑上次就踩了,这次还踩😲 ):

第01章:没啥,主要讲讲概念和技术栈

第02章:主要讲安vue,简单记下

npm -g install npm 将 npm 更新至最新版本

npm install -g vue-cli 安装vue脚手架

vue init webpack 项目名 初始化项目(最好在你的ide workspace去做),vue-route一定要装(y)

npm run dev 就。。起项目嘛(3.x是改成npm run sever了吗)

npm类指令有报错就去百度,实在不行就把node_modules 删了再install 😮

2019040120135655.png

Evan总结的结构图,标红旗都是经常要改的文件(src里是都很关键)

第03章:最简单的前后端交互场景

前端:首先在components下建Login.vue,代码如下(这是截止第05章的代码)

<template>
  <body id="poster">
  <el-form class="login-container" label-position="left"
           label-width="0px">
    <h3 class="login_title">系统登录</h3>
    <el-form-item>
      <el-input type="text" v-model="loginForm.username"
                auto-complete="off" placeholder="账号"></el-input>
    </el-form-item>
    <el-form-item>
      <el-input type="password" v-model="loginForm.password"
                auto-complete="off" placeholder="密码"></el-input>
    </el-form-item>
    <el-form-item style="width: 100%">
      <el-button type="primary" style="width: 100%;background: #505458;border: none" v-on:click="login">登录</el-button>
    </el-form-item>
  </el-form>
  </body>
</template>

<script>

export default {
  name: 'Login',
  data () {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      responseResult: []
    }
  },
  methods: {
    login () {
      this.$axios
        .post('/login', {
          username: this.loginForm.username,
          password: this.loginForm.password
        })
        .then(successResponse => {
          if (successResponse.data.code === 200) {
            this.$router.replace({path: '/index'})
          } else {
            alert(successResponse.data.code)
          }
        })
        .catch(failResponse => {
        })
    }
  }
}
</script>

<style>
.login-container {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 90px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

.login_title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
#poster {
  background:url("../assets/1.jpg") no-repeat;
  background-position: center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
}
body{
  margin: 0px;
}

</style>

撇去css不说,代码简单逻辑是,在两个input输入框输入内容后,点击登录按钮调用login方法,刚才输入的内容会通过v-model双向绑定到loginForm中去,然后在login方法里,会通过axios通过post请求请求login接口(接口前的地址为axios配置地址,下面会说),传参内容会通过this刚才的两个data中的数据传走,然后接口成功返回200的话会重定向到前端index界面(下面会说),否则则会弹出后端返回的code。

axios需要在main.js中配置反向代理地址,并且在config/index.js中进行跨域配置

2.PNG

3.PNG

如此一配置完,调用login接口其实访问的就是后端http://localhost:8443/api/login接口了。

那个重定向的/index是咋回事呢,首先先建立home文件夹,里面下Appindex.vue,然后在div中随便写点内容。在这里会有

export default {
  name: 'AppIndex'
}

这个export就是导出这个vue,可供外部引入,然后在router\index.js导入这个vue文件

5.PNG

这样,你访问:前端启动地址/login就是登录界面,/index就是在home文件里写的Appindex.vue文件,重定向就会定到这去了。

比较关键的几个文件:route/index.js:前端页面配置、main.js:(设置axios,还有之后的全局引入elementui)、config/index.js(axios跨域配置)、各种vue文件:前端主要逻辑处理,可以理解对应后端的controller(这样比较清晰直观)。

后端不做描述了,很简单了。随便给个用户名密码校验,前端输对了,就重定向到另一个界面。

第04章:引入数据库,因为上一章用户名密码是写死的,所以这张前台输来就去查库了,有则回200,没有弹400。

这章就有几个小坑了,一直有我一直踩哈哈哈。

1、数据库配置和idea调试数据库时区设置,都要设成Asia/Shanghai,哎,,,还一个,用mysql-connector调试就用8.x吧,谁现在还用5.7啊。。。(写cj,cj,cj)

6.PNG

2、jpa实体中每个字段都要列注解。。。

7.PNG

3、还有一个问题是自己贴歪了,启动后抛空指针我还以为是jpa规范没写对,结果是@Autowired写在方法里了。。。

package com.jin.writejoker.controller;

import com.jin.writejoker.entity.Result;
import com.jin.writejoker.entity.User;
import com.jin.writejoker.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.util.HtmlUtils;

/**
 * @author jinyunlong
 * @date 2021/5/24 16:56
 * @profession ICBC锅炉房保安
 */
@Controller
public class LoginController {

    @Autowired
    UserService userService;

    @CrossOrigin
    @PostMapping(value = "api/login")
    @ResponseBody
    public Result login(@RequestBody User requestUser) {


        // 对 html 标签进行转义,防止 XSS 攻击
        String username = requestUser.getUsername();
        username = HtmlUtils.htmlEscape(username);

//        if (!Objects.equals("admin", username) || !Objects.equals("123456", requestUser.getPassword())) {
//            String message = "账号密码错误";
//            System.out.println("test"+message);
//            return new Result(400);
//        } else {
//            return new Result(200);
//        }

        User user = userService.get(username, requestUser.getPassword());
        if (null == user) {
            return new Result(400);
        } else {
            return new Result(200);
        }
    }
}

这步controller就是调userService的get方法去dao层里执行那个查库语句去了,一会跟着05章一块看效果吧。

第05章:引入elementui美化界面

npm i element-ui -S 安装element

然后在main.js引入就能去vue中引el标签了,(美,都可以美),然后教程中还用css美化了下登录框,加了个背景图,一个用的class,一个用的id,别忘了是.和#的关系。然后效果如下:

输错,数据库没匹配到数据弹出code:

8.PNG

输对,重定向到index界面:

9.PNG01-05章写(贴)的很快,属实没啥好说的,最基本的前后端交互了。又写了一遍,大道至简,悟在天成吧😑

之后的章节有时间再慢慢写吧。


标题:开源项目白卷复习(01-05)
作者:jyl
地址:http://jinyunlong.xyz/articles/2021/05/24/1621868436781.html