前端 spring boot 史上最全springboot+vue3+element-plus代码实现web登录页面，包含maven配置

前端代码

views目录下Login.vue，主要是登录页面的渲染及js信息，具体如下：

router目录下index.js:

路由处主要配置后端接口的路径：

import { createRouter, createWebHistory } from 'vue-router'

import Home from '../views/Home.vue'

import Login from '../views/Login.vue'

import Registor from '../views/Registor.vue'

const routes = [

{

path: '/',

name: 'Home',

component: Home

},

{

path: '/login',

name: 'Login',

component: Login

},

{

path: '/registor',

name: 'Registor',

component: Registor

}

]

const router = createRouter({

history: createWebHistory(),

routes

})

export default router

api目录下创建config.js、login.js、request.js 其中config.js主要配置请求的ip、端口以及拦截器和响应器，具体代码如下：

import axios from 'axios'

import {ElMessage} from "element-plus";

//创建axios实例

const Service=axios.create({

baseURL:'http://localhost:9090',

headers:{

'Content-Type':'application/json;charset=UTF-8',

'Access-Control-Allow-Origin':'/*'

},

timeout:10000

})

//请求拦截器

Service.interceptors.request.use((config)=>{

return config

}, err => {

console.log(err);

})

//响应拦截器

Service.interceptors.response.use((response)=>{

const res =response.data

if(res.code===200){

return res

}else{

ElMessage.error(res.message || '网络异常')

return res

}

})

export default Service

login.js主要配置登录的接口，相当于封装好，后面可以直接调用，代码如下：

import login from './request'

const loginApi=data=>{

return login.post({

url:"/stu/login",

data

})

}

export default loginApi

request.js主要封装请求，类似于post、get、delete、put等，代码如下：

import Service from "./config"

const get=(config)=>{

return Service({

...config,

method:"get",

params:config.data

})

}

const post=(config)=>{

return Service({

...config,

method:"post",

params:config.data

})

}

export default {

get,

post

}

在vue中还有一些配置类的文件，其中，package.json主要是显示使用的组件信息，如element-plus等，包括版本及组件名称等，通过npm导入或者直接在里面添加都可以，具体代码如下：

{

"name": "vue_demo",

"version": "0.1.0",

"private": true,

"scripts": {

"serve": "vue-cli-service serve",

"build": "vue-cli-service build",

"lint": "vue-cli-service lint"

},

"dependencies": {

"@element-plus/icons-vue": "^2.3.1",

"axios": "^1.6.7",

"core-js": "^3.8.3",

"element-plus": "^2.5.6",

"vue": "^3.2.13",

"vue-router": "^4.3.0"

},

"devDependencies": {

"@babel/core": "^7.12.16",

"@babel/eslint-parser": "^7.12.16",

"@vue/cli-plugin-babel": "~5.0.0",

"@vue/cli-plugin-eslint": "~5.0.0",

"@vue/cli-service": "~5.0.0",

"eslint": "^7.32.0",

"eslint-plugin-vue": "^8.0.3"

},

"eslintConfig": {

"root": true,

"env": {

"node": true

},

"extends": [

"plugin:vue/vue3-essential",

"eslint:recommended"

],

"parserOptions": {

"parser": "@babel/eslint-parser"

},

"rules": {}

},

"browserslist": [

"> 1%",

"last 2 versions",

"not dead",

"not ie 11"

]

}

vue.config.js配置一些全局的配置信息，具体代码如下：

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({

transpileDependencies: true,

// 关闭eslint校验

lintOnSave: false

})

后端代码：

controller层，主要写接口，具体代码如下：

package com.example.demo.controller;

import com.alibaba.fastjson.JSON;

import com.example.demo.entity.LoginInfo;

import com.example.demo.entity.Result;

import com.example.demo.entity.StuInfo;

import com.example.demo.service.Login;

import com.example.demo.service.StuManageService;

import lombok.extern.slf4j.Slf4j;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController

@Slf4j

public class WebController {

@Autowired

private StuManageService stuManageService;

@Autowired

private Login login;

@GetMapping("/first")

public String firstRequest(){

return "这是一个测试接口";

}

@PostMapping (value="/stu/login")

public Result login(@RequestBody LoginInfo loginInfo){

log.info("LoginInfo"+JSON.toJSONString(loginInfo));

LoginInfo loginInfo1 = login.getLoginInfo(loginInfo);

Result result=new Result();

result.setCode(200);

result.setMsg("成功");

result.setData(JSON.toJSONString(loginInfo1));

return result;

}

@GetMapping("/getInfo")

public List getStuInfoList(){

return stuManageService.getStuList();

}

}

service层，主要写业务逻辑，具体代码如下：

package com.example.demo.service;

import com.alibaba.fastjson.JSON;

import com.example.demo.dao.LoginInfoMapper;

import com.example.demo.entity.LoginInfo;

import lombok.extern.slf4j.Slf4j;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Service;

@Slf4j

@Service

public class Login {

@Autowired

private LoginInfoMapper loginInfoMapper;

public LoginInfo getLoginInfo(LoginInfo loginInfo){

log.info("请求参数####"+ JSON.toJSONString(loginInfo));

LoginInfo loginInfo1 = loginInfoMapper.selectLoginInfo(loginInfo);

//没有用户

if(loginInfo1==null){

throw new RuntimeException("账号或用户名密码错误");

}

if(!loginInfo1.getPassword().equals(loginInfo.getPassword())){

throw new RuntimeException("账号或用户名密码错误");

}

return loginInfo1;

}

}

package com.example.demo.service;

import com.example.demo.dao.StuInfoMapper;

import com.example.demo.entity.StuInfo;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Service;

import javax.annotation.Resource;

import java.util.List;

@Service

public class StuManageService {

@Autowired

private StuInfoMapper stuInfoMapper;

public List getStuList(){

return stuInfoMapper.selectStu();

}

}

dao层，主要是与数据库交互，具体代码和xml如下：

package com.example.demo.dao;

import com.example.demo.entity.LoginInfo;

import org.apache.ibatis.annotations.Mapper;

import org.apache.ibatis.annotations.Param;

import org.springframework.stereotype.Repository;

@Mapper

public interface LoginInfoMapper {

LoginInfo selectLoginInfo(@Param("loginInfo")LoginInfo loginInfo );

}

package com.example.demo.dao;

import com.example.demo.entity.StuInfo;

import org.apache.ibatis.annotations.Mapper;

import org.springframework.stereotype.Component;

import org.springframework.stereotype.Repository;

import java.util.List;

@Mapper

@Repository

public interface StuInfoMapper{

List selectStu();

}

select * from login where user_name=#{loginInfo.userName}

select * from stu_info

insert into stu_info(user_name,password) values(#{userName},#{password})

entity层，主要是封装的属性，具体代码如下：

package com.example.demo.entity;

import lombok.Data;

@Data

public class LoginInfo {

private String userName;

private String password;

}

package com.example.demo.entity;

import lombok.Data;

@Data

public class Result {

private Integer code;

private String msg;

private String data;

}

package com.example.demo.entity;

import lombok.Data;

@Data

public class StuInfo {

private Integer id;

private String name;

private String sex;

private Integer age;

}

conf目录主要配置一些全局信息的配置，其中，CorsConfig主要添加一些跨域配置，具体代码如下：

package com.example.demo.conf;

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;

@Configuration

public class CorsConfig {

@Bean

public CorsFilter corsFilter(){

//创建CORS过滤器对象

CorsConfiguration corsConfiguration = new CorsConfiguration();

//接下去就是设置http头信息

corsConfiguration.addAllowedOrigin("*"); //设置允许跨域请求的域名

corsConfiguration.addAllowedHeader("*"); //设置请求头字段

corsConfiguration.addAllowedMethod("*"); //设置允许的请求方式

// 设置允许跨域的路径

UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();

source.registerCorsConfiguration("/**",corsConfiguration);

return new CorsFilter(source);

}

}

tomcat的一些配置，具体代码如下：

package com.example.demo.conf;

import org.apache.catalina.connector.Connector;

import org.springframework.boot.web.embedded.tomcat.TomcatServletWebServerFactory;

import org.springframework.context.annotation.Bean;

import org.springframework.context.annotation.Configuration;

@Configuration

public class TomcatConfig {

@Bean

public TomcatServletWebServerFactory webServerFactory() {

TomcatServletWebServerFactory factory = new TomcatServletWebServerFactory();

factory.addConnectorCustomizers((Connector connector) -> {

connector.setProperty("relaxedPathChars", "\"<>[\\]^`{|}");

connector.setProperty("relaxedQueryChars", "\"<>[\\]^`{|}");

});

return factory;

}

}

后端数据库连接的一些配置，以及mapper读取的一些配置，首先是application.properties，具体如下：

server.port=9090

spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

spring.datasource.url=jdbc:mysql://127.0.0.1:3306/student_manage?useUnicode=true&characterEncoding=utf8

spring.datasource.username=root

spring.datasource.password=yuluo15200342100

#配置mapper xml文件的路径

mybatis.type-aliases-package=com.example.demo.entity

mybatis.mapper-locations=classpath:com/example/demo/dao/mapper/*.xml

logging.config: classpath:logback-spring.xml

日志打印设置信息，配置在logback-spring.xml，具体如下：

D:/log/hfw-client/hfw_log/stdout.log

%date [%level] [%thread] %logger{60} [%file : %line] %msg%n

D:/log/hfw-client/hfw_log/stdout.log.%d{yyyy-MM-dd}.log

30

pom.xml的具体信息如下：

xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">

4.0.0

org.springframework.boot

spring-boot-starter-parent

2.5.14

com.example

demo

0.0.1-SNAPSHOT

demo

Demo project for Spring Boot

1.8

org.springframework.boot

spring-boot-starter

org.springframework.boot

spring-boot-starter-web

org.springframework.boot

spring-boot-starter-test

test

org.springframework.boot

spring-boot-starter-jdbc

org.springframework.boot

spring-boot-starter-data-jpa

mysql

mysql-connector-java

com.alibaba

druid

1.1.6

org.lionsoul

ip2region

1.7.2

org.mybatis.spring.boot

mybatis-spring-boot-starter

2.1.2

org.projectlombok

lombok

true

com.alibaba

fastjson

1.2.47

org.projectlombok

lombok

1.16.20

provided

org.openjdk.jol

jol-core

0.9

src/main/java

**/*.xml

false

src/main/resources

**/*.*

org.springframework.boot

spring-boot-maven-plugin

Maven的setting.xml信息。具体如下：

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://maven.apache.org/SETTINGS/1.0.0 http://maven.apache.org/xsd/settings-1.0.0.xsd">

D:\Maven\apache-maven-3.6.3\maven-repository

nexus-aliyun

*

Nexus aliyun

http://maven.aliyun.com/nexus/content/groups/public

jdk-1.8

true

1.8

1.8

1.8

1.8

精彩链接