Comment créer un projet vue+springboot

cd/d 路径地址

vue init webpack 项目名称

Project name：项目名称
Project description：项目描述
author：作者
Runtime + Complier： 运行时和编译器：默认第一个
install router ：是否安装路由，选择安装就后面我安装步骤就不用执行
Use ESLint to lint your code? (Y/n)：问你是否使用eslint限制语法，新手建议否
Set up unit tests (Y/n):单元测试，新手选否
Setup e2e tests with Nightwatch? (Y/n)：使用Nightwatch设置端到端测试?，选否
Should we run `npm install` for you after the project has been created?：用什么方式运行项目：选npm

{
  "name": "项目名称",
  "version": "0.1.0", // b=版本
  "private": true,
  // 运行脚本：serve为启动项目脚本，build为打包项目脚本
  "scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build"
  },
  // 安装的vue依赖文件
  "dependencies": {
    "vue": "^2.6.11",
    // vue-router一般作传参和页面跳转使用
    "vue-router": "^3.5.1"
  },
  "devDependencies": {
    "@vue/cli-service": "~4.5.12",
    "vue-template-compiler": "^2.6.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

vue ui

npm install vue-router

npm install axios

npm i element-ui -S

// 导入包
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui'
import axios from 'axios'

Vue.config.productionTip = false
// elementui
Vue.use(ElementUI)
Vue.prototype.$axios = axios

new Vue({
  el: '#app',
  // 路由
  router,
  render: h => h(App),
}).$mount('#app')

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login'
import maintry from '@/views/maintry'
import addScore from '@/views/addScore'
import deleteScore from '@/views/deleteScore'
import showScore from '@/views/showScore'
import updateScore from '@/views/updateScore'

// 挂载vue-router
// 将组件添加到router
Vue.use(Router)
export default new Router({
    routes: [
        {
            path: '/',
            redirect: '/login'
        },
        {
            path: '/login',
            name: 'Login',
            component: Login
        },
        {
            path: '/maintry',
            name: 'maintry',
            component: maintry
        },
        {
            path: '/addScore',
            name: 'addScore',
            component: addScore
        },
        {
            path: '/deleteScore',
            name: 'deleteScore',
            component: deleteScore
        },
        {
            path: '/showScore',
            name: 'showScore',
            component: showScore
        },
        {
            path: '/updateScore',
            name: 'updateScore',
            component: updateScore
        }
    ]
})

ps: 需要注意的是，配置好了路由，你还需要在App.vue里进行声明，需要在App.vue
加入<router-view/>代码

<template>
  <div id="app">
      <router-view/>
  </div>
</template>

<script>

export default {
  name: &#39;app&#39;
}
</script>

<style>
#app {
  font-family: &#39;Avenir&#39;, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
    height: 100%;
}
</style>

import axios from 'axios'

// 创建axios实例
// eslint-disable-next-line no-unused-vars
const service = axios.create({
    // baseURL: '/', // api的base_Url
    // 后端的请求路径
    baseURL: 'http://localhost:8081/student', // api的base_Url
    timeout: 50000 // 请求超时时间
})

// 请求拦截器
axios.interceptors.request.use(
    function (config) {
        // 在发送请求之前做些什么
        return config
    },
    function (error) {
        // 对请求错误做些什么
        return Promise.reject(error)
    }
)

// 响应拦截器
axios.interceptors.response.use(
    function (config) {
        // 对响应数据做点什么
        return config
    },
    function (error) {
        // 对响应错误做点什么
        return Promise.reject(error)
    }
)

export default service

// 导入axios配置
import service from '../utils/request'

// 登录
export function loginTosystem(username, password) {
    return service.get('/login/loginTosystem', {
        headers: { 'Content-Type': 'application/json' },
        params: {
            username: username,
            password: password
        }
    })
}

// 导入axios配置
import service from '../utils/request'

// 注册账号
export function registerAccount (obj) {
    return service.post('/register/registerAccount', JSON.stringify(obj), {
        headers: { 'Content-Type': 'application/json' }
    })
}

// 这里给大家举一个例子：
// 登录和注册界面以及功能
<template>
    <div v-show="loginShowControll">
<!--        登录界面-->
        <div v-show="loginShow" id="login_login">
            <el-container>
                <el-header>学生成绩管理系统登录入口</el-header>
                <el-main>
<!--                    输入框-->
                    <span id="login_usernameInfo">用户名:</span>
                    <el-input v-model="username" placeholder="请输入用户名" id="login_input_username"></el-input>
                    <span id="login_passwordInfo">密码:</span>
                    <el-input v-model="password" placeholder="请输入密码" id="login_input_password"></el-input>
<!--                    按钮-->
                    <button type="submit" id="login_submit" @click="loginButton">登录</button>
                    <button type="submit" id="login_registerButton" @click="registerButton">注册</button>
                </el-main>
                <el-footer>登录界面</el-footer>
            </el-container>
        </div>
<!--        注册界面-->
        <div v-show="registerShow" id="login_register">
            <el-container>
                <el-header>学生成绩管理系统注册入口<span id="register_return" @click="registerReturn" @mouseover="mouseOver" @mouseleave="mouseLeave" :>返回</span></el-header>
                <el-main>
                    <!--                    输入框-->
                    <span id="register_nameInfo">姓名:</span>
                    <el-input v-model="name" placeholder="请输入姓名" id="register_input_name"></el-input>
                    <span id="register_usernameInfo">用户名:</span>
                    <el-input v-model="registerUsername" placeholder="请输入用户名" id="register_input_username"></el-input>
                    <span id="register_passwordInfo">密码:</span>
                    <el-input v-model="registerPassword" placeholder="请输入用户名" id="register_input_password"></el-input>
                    <!--                    按钮-->
                    <button type="submit" id="register_submit" @click="submitButton">提交</button>
                    <button type="submit" id="register_registerButton" @click="resetButton">重置</button>
                </el-main>
                <el-footer>注册界面</el-footer>
            </el-container>
        </div>
    </div>
</template>
<script>
    import { loginTosystem } from "../api/get";
    import { registerAccount } from "../api/post"

export default {
    name: &#39;Login&#39;,
    data () {
        return {
            loginShowControll: true, // 登录、注册界面显示控制
            loginShow: true, // 登录界面显示控制
            registerShow: false, // 注册界面显示控制
            username: &#39;&#39;, // 用户名
            password: &#39;&#39;, // 密码
            name: &#39;&#39;, // 姓名
            bgc: &#39;&#39;, // 鼠标悬停变色
            registerUsername: &#39;&#39;, // 注册账号
            registerPassword: &#39;&#39; // 注册密码
        }
    },
    methods: {
        // 跳转注册界面
        registerButton () {
            this.loginShow = false
            this.registerShow = true
        },
        // 登录学生成绩管理系统
        loginButton () {
            if (this.username.trim() == &#39;&#39;) {
                alert(&#39;请输入用户名&#39;)
                return
            }
            if (this.password.trim() == &#39;&#39;) {
                alert(&#39;请输入密码&#39;)
                return
            }
            loginTosystem(this.username, this.password).then(res => {

                if (res.data.data == null) {
                    alert(&#39;账号或密码错误！&#39;)
                } else {
                    alert(&#39;登录成功&#39;)
                    this.$router.push({
                        path: &#39;/maintry&#39;,
                        // 将username传到maintry组件，用于获取登陆人员的姓名
                        query: {username: this.username}
                    })
                }
            })
        },
        // 注册按钮
        submitButton () {
            if (this.name = &#39;&#39;) {
                alert(&#39;请输入姓名&#39;)
                return
            }
            if (this.username = &#39;&#39;) {
                alert(&#39;请输入用户名&#39;)
                return
            }
            if (this.password = &#39;&#39;) {
                alert(&#39;请输入密码&#39;)
                return
            }
            const obj = {
                username: this.registerUsername,
                password: this.registerPassword,
                name: this.name
            }
           this.registerAccount(obj)
            this.name = &#39;&#39;
            this.registerUsername = &#39;&#39;
            this.registerPassword = &#39;&#39;

        },
        // 注册信息
        async registerAccount(obj) {
            await registerAccount(obj).then(res => {
                alert(res.data.data)
            })
        },
        // 重置文本
        resetButton () {
            this.name = &#39;&#39;
            this.registerUsername = &#39;&#39;
            this.registerPassword = &#39;&#39;
        },
        // 返回登录界面
        registerReturn () {
            this.loginShow = true
            this.registerShow = false
        },
        // 鼠标悬停变色
        mouseOver () {
            this.bgc = &#39;background-color: #cccccc;color: red&#39;
        },
        mouseLeave () {
            this.bgc = &#39;&#39;
        }
    },
    watch: {
        // 监听登录和注册地方只能使用数字和英文
        username(newValue, oldValue) {
            this.username = newValue.replace(/[^A-Za-z0-9]/g, &#39;&#39;)
        },
        password(newValue, oldValue) {
            this.password = newValue.replace(/[^A-Za-z0-9]/g, &#39;&#39;)
        },
        registerUsername (newValue, oldValue) {
            this.registerUsername = newValue.replace(/[^A-Za-z0-9]/g, &#39;&#39;)
        },
        registerPassword(newValue, oldValue) {
        this.registerPassword = newValue.replace(/[^A-Za-z0-9]/g, &#39;&#39;)
    },
        // 只能输入汉字
        name(newValue,oldValue) {
            this.name = newValue.replace(/[^\4E00-\u9FA5]/g, &#39;&#39;)
        }
    }
}
</script>
<style scoped>
@import "../assets/css/login.css";
</style>

module.exports = {
  publicPath: '/',
  lintOnSave: false,
  devServer: {
    disableHostCheck: true,
    open: true,
    port: 8080,
    proxy: {
      '/': {
        // 连接到后端的路径
        target: 'http://localhost:8081/student',
        changeOrigin: true,
        secure: false,
        pathRewrite: {
          '^/': '/'
        }
      }
    }
  }
}

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.hxc</groupId>
    <artifactId>com.StudentScoreManage</artifactId>
    <version>1.0-SNAPSHOT</version>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.4.5</version>
    </parent>
    <dependencies>
<!--        springboot-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
<!--        mysql-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.26</version>
        </dependency>
<!--        fastjson-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.76</version>
        </dependency>
<!--        mybatis-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.3</version>
        </dependency>
<!--        lombok-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.12</version>
        </dependency>
<!--        redis-->
        <dependency>
            <groupId>redis.clients</groupId>
            <artifactId>jedis</artifactId>
            <version>3.6.0</version>
        </dependency>
    </dependencies>
    <!--    编码格式-->
    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
    </properties>
    <!--    打包配置-->
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
</project>

package com.StudentScore;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
//声明springboot
@SpringBootApplication
//定义mapper区
@MapperScan("com.StudentScore.Mapper")
public class StudentScoreApplication {
    public static void main(String[] args) {
        SpringApplication.run(StudentScoreApplication.class,args);
    }
}

package com.StudentScore.Config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * @author hxc
 * @dateTime: 2021-12-2
 * @description: 跨域配置
 * */
@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        //设置允许跨域
        registry.addMapping("/**")
                .allowedOrigins("*")
                // 设置允许跨域请求的域名
                .allowedOriginPatterns("*")
                //设置允许的方法
                .allowedMethods("*")
                .maxAge(3600);
    }
}

server:
  port: 8081
  servlet:
# 项目的路径，配置如下之后，它的路径为http:locahost:8081/student
    context-path: /student
#    数据库
spring:
  datasource:
    username: root
    url: jdbc:mysql://localhost:3306/mydb
    password: root
    driver-class-name: com.mysql.cj.jdbc.Driver

package com.StudentScore.constant;

import lombok.Getter;

@Getter
public enum ResutEnum {
    OK(2000,"成功"),
    Error(5000,"失败");
    ResutEnum(Integer code,String message){
        this.code = code;
        this.message = message;
    }
    Integer code;
    String message;
}

package com.StudentScore.Vo;

import com.StudentScore.constant.ResutEnum;
import lombok.Getter;
/**
 * @author hxc
 * @dateTime: 2021-12-4
 * @description: 数据交互响应-提示
 * */
@Getter
public class ResultVo<T> {
    private T data;
    private Integer code;
    private String message;
    public ResultVo(ResutEnum resutEnum) {
        this.code = resutEnum.getCode();
        this.message = resutEnum.getMessage();
        data = null;
    }
    public ResultVo(ResutEnum resutEnum,T data) {
        this.code = resutEnum.getCode();
        this.message = resutEnum.getMessage();
        this.data = data;
    }
    public ResultVo(Integer code,String message,T data){
        this.code = code;
        this.message = message;
        this.data = data;
    }
}

package com.StudentScore.Controller;

import com.StudentScore.Service.LoginService;
import com.StudentScore.Vo.ResultVo;
import com.StudentScore.constant.ResutEnum;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import javax.annotation.Resource;

/**
 * @author hxc
 * @dateTime: 2021-12-2
 * @description: 登录Controller
 * */
@RestController
@RequestMapping("/login/**")
public class LoginController {
    @Resource
    private LoginService loginService;

    // 登录到系统
    @GetMapping("/loginTosystem")
    public ResultVo loginTosystem(@RequestParam("username")String username, @RequestParam("password")String password) {
        return new ResultVo(ResutEnum.OK,loginService.loginTosystem(username,password));
    }
    @GetMapping("/findName")
    public ResultVo findName(@RequestParam("username")String username) {
        return new ResultVo(ResutEnum.OK,loginService.findName(username));
    }
}

package com.StudentScore.Controller;

import com.StudentScore.Service.RegisterService;
import com.StudentScore.Vo.ResultVo;
import com.StudentScore.constant.ResutEnum;
import com.StudentScore.dto.Account;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;

/**
 * @author hxc
 * @dateTime: 2021-12-2
 * @description: 注册Controller
 * */
@RestController
@RequestMapping("/register/**")
public class RegisterController {
    @Resource
    private RegisterService registerService;

    // 注册
    @PostMapping("/registerAccount")
    public ResultVo registerAccount(@RequestBody Account account) {
        return new ResultVo(ResutEnum.OK,registerService.registerAccount(account));
    }
}

package com.StudentScore.dto;

import lombok.Data;

/**
 * @author hxc
 * @dateTime: 2021-12-2
 * @description: 账号登录注册实体
 * */
@Data
public class Account {
    private String id;
    // 姓名
    private String name;
    // 账号
    private String username;
    // 密码
    private String password;
}

package com.StudentScore.Service;

import com.StudentScore.Mapper.LoginMapper;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;

/**
 * @author hxc
 * @dateTime: 2021-12-2
 * @description: 登录service
 * */
@Service
public class LoginService {
@Resource
    private LoginMapper loginMapper;
    // 登录
    public String loginTosystem(String username,String password){
        String message = "";
        // 判断登录的角色是否为空
        if(loginMapper.loginTosystem(username,password)== null) {
            message = "登录失败";
        }else {
            loginMapper.loginTosystem(username,password);
            message = "登录成功";
        }
       return message;
    }

    // 获取登录人员的姓名
    public String findName(String username) {
        return loginMapper.findName(username);
    }
}

package com.StudentScore.Service;

import com.StudentScore.Mapper.RegisterMapper;
import com.StudentScore.dto.Account;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;

/**
 * @author hxc
 * @dateTime:2021-12-2
 * @description: 注册service
 * */
@Service
public class RegisterService {
    @Resource
    private RegisterMapper registerMapper;

    // 注册
    public String registerAccount(Account account) {
        registerMapper.registerAccount(account);
        return "注册成功";
    }
}

package com.StudentScore.Mapper;

import org.apache.ibatis.annotations.Param;

/**
 * @author hxc
 * @dateTime: 2021-12-2
 * @description: 登录mapper
 * */
public interface LoginMapper {
    // 登录
    String loginTosystem(@Param("username")String username, @Param("password")String password);
    // 获取登录的人的姓名
    String findName(@Param("username")String username);
}

package com.StudentScore.Mapper;

import com.StudentScore.dto.Account;
import org.apache.ibatis.annotations.Param;

/**
 * @author hxc
 * @dateTime: 2021-12-2
 * @description: 注册mapper
 * */
public interface RegisterMapper {
    // 注册
    void registerAccount(@Param("account")Account account);
}

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
        <!-- 映射的mapper层-->
<mapper namespace="com.StudentScore.Mapper.LoginMapper">

    <select id="loginTosystem" resultType="java.lang.String">
        select username,password from scorelogin where username=#{username} and password=#{password}
    </select>
    <select id="findName" resultType="java.lang.String">
        select name from scorelogin where username=#{username}
    </select>
</mapper>

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.StudentScore.Mapper.RegisterMapper">
<!--useGeneratedKeys="true" keyProperty="id"代表使用自增，自增的对象是id -->
    <insert id="registerAccount" parameterType="com.StudentScore.dto.Account" useGeneratedKeys="true" keyProperty="id">
        insert into scorelogin (name,username,password) values (#{account.name},#{account.username},#{account.password})
    </insert>
</mapper>