前端SPA以及练习

最新推荐文章于 2024-10-26 17:17:42 发布

时光_1024

最新推荐文章于 2024-10-26 17:17:42 发布

阅读量251

点赞数

分类专栏： MySql 数据库文章标签： vue java web

本文链接：https://blog.youkuaiyun.com/qq_48469418/article/details/117000076

版权

数据库同时被 2 个专栏收录

4 篇文章

订阅专栏

MySql

3 篇文章

订阅专栏

1. 环境搭建

1.1 创建前端项目

vue create exam-student-spa

在这里插入图片描述

1.2 下载axios

cnpm install axios --save

在这里插入图片描述

1.3 启动

npm run serve

在这里插入图片描述

1.4 访问

http://localhost:8080/

在这里插入图片描述

前端项目启动时，默认使用的8080端口，后端程序启动时，需要将端口号改成8081

在这里插入图片描述

注意：Swagger 配置类中的端口

在这里插入图片描述

1.5 修改入门页面

在这里插入图片描述

<template>
  <div>
    <router-link to="/classes_list">班级管理</router-link> | 
    <router-link to="/student_list">学生管理</router-link> | 
    <router-link to="/user_register">注册</router-link> | 
    <router-link to="/user_login">登录</router-link> | 
    <hr>
    <!-- 视图显示区域 -->
    <router-view/>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

在这里插入图片描述

1.6 跨域配置文件

后面访问遇到的问题

在这里插入图片描述

拷贝配置类

在这里插入图片描述

package com.czxy.config;

import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;


/**  全局跨域配置类
 * Created by liangtong.
 */
//@Configuration
public class GlobalCorsConfig {
    @Bean
    public FilterRegistrationBean corsFilter() {
        //1.添加CORS配置信息
        CorsConfiguration config = new CorsConfiguration();
        //放行哪些原始域
        config.addAllowedOrigin("*");
        //是否发送Cookie信息
        config.setAllowCredentials(true);
        //放行哪些原始域(请求方式)
        config.addAllowedMethod("OPTIONS");
        config.addAllowedMethod("HEAD");
        config.addAllowedMethod("GET");     //get
        config.addAllowedMethod("PUT");     //put
        config.addAllowedMethod("POST");    //post
        config.addAllowedMethod("DELETE");  //delete
        config.addAllowedMethod("PATCH");
        config.addAllowedHeader("*");

        //2.添加映射路径
        UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**", config);

        //3.返回新的CorsFilter.
        //return new CorsFilter(configSource);
        FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(configSource));
        bean.setOrder(0);
        return bean;
    }

}

2. 前端实现：SPA版

2.1 班级管理

2.1.1 查询所有

需求

在这里插入图片描述

编写路由 src/router/index.js

在这里插入图片描述

import Vue from 'vue'
import VueRouter from 'vue-router'
import ClassesList from '../views/ClassesList.vue'


Vue.use(VueRouter)

const routes = [
  {
    path: '/classes_list',
    name: '班级列表',
    component: ClassesList
  }
]
// 其他不变，省略

编写班级列表页面 src/views/ClassList.Vue

在这里插入图片描述

<template>
  <div>
    <router-link to="/classes_add">添加班级</router-link>

    <table id="tid" border="1" width="800">
      <tr>
          <td>班级ID</td>
          <td>班级名称</td>
          <td>班级描述</td>
          <td>操作</td>
      </tr>
      <tr v-for="(classes,index) in classesList" :key="index">
          <td>{{classes.cid}}</td>
          <td>{{classes.cname}}</td>
          <td>{{classes.desc}}</td>
          <td>
              <a>修改</a>
              <a>删除</a>
          </td>
      </tr>
    </table>
  </div>
</template>

<script>
// 导入axios 
import axios from 'axios'

export default {
  data() {
    return {
      classesList: [],       //班级数据
    }
  },
  mounted() {
    // 查询所有
    this.findAll()
  },
  methods: {
    findAll() {
      var url = `http://localhost:8081/classes`;
      axios.get(url)
      .then( response => {
        if(response.data.code == 1){
            this.classesList = response.data.data
        } else {
            alert(response.data.message)
        }
      })
      .catch(error => {
        alert(error)
      })
    },
  },
}
</script>

<style>

</style>

2.1.2 添加

需求

在这里插入图片描述

修改列表页面，确定添加路径

在这里插入图片描述

修改路由

在这里插入图片描述

import Vue from 'vue'
import VueRouter from 'vue-router'
import ClassesList from '../views/ClassesList.vue'
import ClassesAdd from '../views/ClassesAdd.vue'


Vue.use(VueRouter)

const routes = [
  {
    path: '/classes_list',
    name: '班级列表',
    component: ClassesList
  },
  {
    path: '/classes_add',
    name: '添加班级',
    component: ClassesAdd
  }
]

编写添加页面 ClassesAdd.vue

<template>
  <div>
    <table id="tid" border="1">
      <tr>
          <td>班级ID</td>
          <td><input v-model="classes.cid" /> </td>
      </tr>
      <tr>
          <td>班级名称</td>
          <td><input  v-model="classes.cname" /> </td>
      </tr>
      <tr>
          <td>班级描述</td>
          <td>
              <textarea cols="20" rows="5" v-model="classes.desc" ></textarea>
          </td>
      </tr>
      <tr>
          <td></td>
          <td><input type="button" value="添加" @click="addClasses" /></td>
      </tr>
    </table>
  </div>
</template>

<script>
// 导入axios
import axios from 'axios'

export default {
  data() {
    return {
      classes: {},       //学生表单数据
    }
  },
  methods: {
    addClasses() {
      var url = `http://localhost:8081/classes`;
      axios.post(url, this.classes)
      .then( response => {
        if(response.data.code == 1){
          // 成功提示
          alert(response.data.message)
          // 跳转
          //location.href = "/classes_list"
          this.$router.push("/classes_list")
        } else {
          alert(response.data.message)
        }
      })
      .catch(error => {
          alert(error)
      })
    }
  },
}
</script>

<style>

</style>

2.1.3 修改

修改列表

在这里插入图片描述

<router-link :to="'/classes_edit?id='+classes.cid">修改</router-link>

修改路由

在这里插入图片描述

import Vue from 'vue'
import VueRouter from 'vue-router'
import ClassesList from '../views/ClassesList.vue'
import ClassesAdd from '../views/ClassesAdd.vue'
import ClassesEdit from '../views/ClassesEdit.vue'


Vue.use(VueRouter)

const routes = [
  {
    path: '/classes_list',
    name: '班级列表',
    component: ClassesList
  },
  {
    path: '/classes_add',
    name: '添加班级',
    component: ClassesAdd
  },
  {
    path: '/classes_edit',
    name: '编辑班级',
    component: ClassesEdit
  }
]

编写编辑页面 ClassesEdit.vue

<template>
  <div>
    <table id="tid" border="1">
      <tr>
        <td>班级名称</td>
        <td>
            <input v-model="classes.cname" />
        </td>
      </tr>
      <tr>
        <td>班级描述</td>
        <td>
            <textarea cols="20" rows="5" v-model="classes.desc" ></textarea>
        </td>
      </tr>
      <tr>
        <td></td>
        <td><input type="button" value="更新" @click="editClasses" /></td>
      </tr>
    </table>
  </div>
</template>

<script>
// 导入axios
import axios from 'axios'

export default {
  data() {
    return {
      classes: {},       //学生表单数据
    }
  },
  mounted() {
    // 通过id查询详情
    this.findById()
  },
  methods: {
    findById() {
      // 获得id
      var id = this.$route.query.id
      // 路径
      var url = `http://localhost:8081/classes/${id}`;

      axios.get(url)
      .then( response => {
        if(response.data.code == 1){
            this.classes = response.data.data
        } else {
            alert(response.data.message)
        }
      })
      .catch(error => {
          alert(error)
      })
    },
    editClasses() {
      var url = `http://localhost:8081/classes`;
      axios.put(url, this.classes)
      .then( response => {
        if(response.data.code == 1){
          // 成功提示
          alert(response.data.message)
          // 跳转
          //location.href = "/classes_list"
          this.$router.push("/classes_list")
        } else {
          alert(response.data.message)
        }
      })
      .catch(error => {
          alert(error)
      })
    }
  },
}
</script>

<style>

</style>

2.1.4 删除

修改列表页面
在这里插入图片描述

<a href="" @click.prevent="deleteClasses(classes.cid)">删除</a>

编写删除函数

在这里插入图片描述

    deleteClasses(id) {
      if(! confirm("您确定要删除么？")){
        return
      }
      // 删除
      var url = `http://localhost:8081/classes/${id}`;
      axios.delete(url)
      .then( response => {
        if(response.data.code == 1){
          // 成功提示
          alert(response.data.message)
          // 重新查询
          this.findAll()
        } else {
            alert(response.data.message)
        }
      })
      .catch(error => {
        alert(error)
      })
    }