面向呆瓜编程：最基础的前端部分连接后端

之前把后端内容都写完了，今天把前端也补上。

这样我的这些垃圾代码也能算得上：前后端分离+Springboot+Mongodb

这就是一个很棒的项目了（

在idea新建一个Vue.js，在Webstorm中打开

调出终端，执行 npm install

运行完成后，输入 npm run dev 。也可以在package.json里直接点击start。

如果node.js版本不一样，可能会报错，这时候添加一行黄色框里的内容，用它代替start就OK了，我原称之为神奇代码。

"serve": "set NODE_OPTIONS=\"--openssl-legacy-provider\" & npm run dev\n"

项目做完后，目录结构大概长这个样子，刚开始忘记截图了。

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
// 引用axios，并设置基础URL为后端服务api地址
var axios = require('axios')
axios.default.baseURL = 'https://localhost:8443/api'
// 将API方法绑定到全局
Vue.prototype.$axios = axios
Vue.config.productionTip = true

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

router下的index.js

import Vue from 'vue'
import Router from 'vue-router'
import Users from "../components/User/Users.vue";

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',//没有路径时，转到User
      redirect: '/User'
    },
    {
      path: '/User',
      name: 'BlogUser',
      component: Users
    }
  ]
})

Users.vue

<template>
  <div id="back">
    <div id="code">
      <hr/>
      <div v-if="User!==''">Id:{{User.id}},姓名：{{User.name}}，年龄：{{User.age}}，职业：{{User.job}}</div>
      <input type="text" v-model="username" placeholder="请输入姓名">
      <button v-on:click="findname">查询</button>
      <hr/>
      <form action="/Userb/changeName" method="POST">
        <input type="text" name="oldName" placeholder="请输入需要修改的姓名">
        <input type="text" name="newName" placeholder="请输入更新后的姓名">
        <button type="submit">修改</button>
      </form>
      <hr/>
      <form action="/Userb/removeUser" method="POST">
        <input type="text" name="name" placeholder="需要删除的用户姓名">
        <button type="submit">删除</button>
      </form>
      <hr>
      <form action="/Userb/addUser" method="POST">
        <input type="text" name="name" placeholder="姓名">
        <input type="text" name="age" placeholder="年龄">
        <input type="text" name="job" placeholder="职业">
        <button type="submit">新增</button>
      </form>
      <hr>
      <div>
        <button v-on:click="findAll">查询所有用户</button>
        <table>
          <thead>
          <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Age</th>
            <th>Job</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="user in UserList" :key="user.id">
            <td>{{ user.id }}</td>
            <td>{{ user.name }}</td>
            <td>{{ user.age }}</td>
            <td>{{ user.job }}</td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
<script>
import blogHeader from "../common/BlogHeader.vue"
import blogFooter from "../common/BlogFooter.vue"
import axios from "axios";
export default {
  name: 'BlogUser', // blogHeader、blogFooter组件给申明到components里面然后在template里面使用
  components: {blogHeader, blogFooter},

  data() {
    return {
      UserList: [],
      hi: [],
      User: '',
      username: [],

    }
  },

  methods: {
    findAll() {
      // 发送HTTP请求获取所有用户数据
      axios.get('/Userb/findall')
        .then(response => {
          // 请求成功，获取到用户数据
          this.UserList = response.data;
          this.UserList=this.UserList.map(user => {
            return {
              ...user,
              isEditing: false  // 添加 isEditing 字段，并赋初值为 false
            };
          });
        })
        .catch(error => {
          // 请求失败，处理错误逻辑
          console.error(error);
        });
    },
    hii() {
      axios.get('/api/hi')
        .then(response => {
          // 请求成功，获取到用户数据
          this.hi = response.data;
        })
        .catch(error => {
          // 请求失败，处理错误逻辑
          console.error(error);
        });
    },
    findname() {
      const username = this.username;
      axios.get('/Userb/findname', {
        params: {
          name: username
        }
      })
        .then(response => {

          this.User = response.data;

        })
        .catch(error => {
          this.User = '查无此人，请重新输入';
          // 请求失败
          console.error(error);

        });
    },
    // methods(){
    //   this.findAll()
    // }


  }
}
</script>
<style>
#back{
  height: 682px;
  width: 1224px;
  background-image: url("../../assets/ganyu.jpg");
  //background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  background-size: cover;
}

#code{
  padding-top: 100px;
}
</style>

BlogFooter.vue

<template>
  <div>
    页面尾部
  </div>
</template>

<script>
export default {
  name: 'BlogFooter'
}
</script>

config下的index.js配置下代理。用于匹配一下前后端路径。

后端代码部分，配置一下跨域资源共享，8080是前端的端口号，把8080中的四种请求都放进来，不过好像挺无所谓的，自己写着玩的话，用个get就差不多了，没什么区别。

package com.example.demotest.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.util.AntPathMatcher;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.PathMatchConfigurer;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
class WebConfig implements WebMvcConfigurer {
    @Override
    public void configurePathMatch(PathMatchConfigurer configurer) {
        AntPathMatcher matcher = new AntPathMatcher();
        matcher.setCaseSensitive(false);
        configurer.setPathMatcher(matcher);
    }

    //解决跨域资源共享问题
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:8080")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*");
    }

}

然后点击serve或者start，编译完成后会把前端地址放出啦。

基本功能都能实现

前端主要配置三个地方，config下的index.js中的代理、router下的index.js中的路由、main.js中的axios和后端地址。

后端中配置一下跨域资源共享。