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

04-19 阅读 0评论

前端代码

史上最全springboot+vue3+element-plus代码实现web登录页面，包含maven配置,史上最全springboot+vue3+element-plus代码实现web登录页面，包含maven配置,词库加载错误:未能找到文件“C:\Users\Administrator\Desktop\火车头9.8破解版\Configuration\Dict_Stopwords.txt”。,使用,设置,域名,第1张
（图片来源网络，侵删）

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

  

    
  



import {reactive,ref} from "vue"
import loginApi from "@/api/login"
const data = ref({})
const rules = reactive({
  userName: [
    { required: true, message: '请输入账号', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ]
})
//http://localhost:9090/stu/login
const ruleFormRef=ref({
  userName:'',
  password:'',
})
const login=()=>{
   loginApi(data.value).then(res=>{
     if(res.code===200){
       console.log('result',"登录成功")
     }else{
       console.log('result',"登录失败")
     }
   }).catch(error=>{
     console.log(error)
     console.log('datassss',data)
   })
}


.login-container{
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("@/assets/images/login.jpg");
  background-size: cover;
}
.login-box{
  background-color: rgba(200,200,200,.3);
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  padding:35px;
}

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: 'https://blog.csdn.net/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主要配置登录的接口，相当于封装好，后面可以直接调用，代码如下：

史上最全springboot+vue3+element-plus代码实现web登录页面，包含maven配置,史上最全springboot+vue3+element-plus代码实现web登录页面，包含maven配置,词库加载错误:未能找到文件“C:\Users\Administrator\Desktop\火车头9.8破解版\Configuration\Dict_Stopwords.txt”。,使用,设置,域名,第2张
（图片来源网络，侵删）
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层，主要写业务逻辑，具体代码如下：

史上最全springboot+vue3+element-plus代码实现web登录页面，包含maven配置,史上最全springboot+vue3+element-plus代码实现web登录页面，包含maven配置,词库加载错误:未能找到文件“C:\Users\Administrator\Desktop\火车头9.8破解版\Configuration\Dict_Stopwords.txt”。,使用,设置,域名,第3张
（图片来源网络，侵删）
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的具体信息如下：


    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信息。具体如下：




  
 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

相关阅读：

1、怎么把网页弄上域名(怎么把网址添加到网页上方)

2、王者荣耀怎么找到对方的区域名(王者荣耀怎么找到对方的区域名字)

3、Android Studio音乐播放器（使用sqlite创建数据库）

4、Windows下载安装配置并使用Redis（保姆级教程）

5、【菜狗学前端】在原生微信小程序使用腾讯地图API接口

免责声明
本网站所收集的部分公开资料来源于AI生成和互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
文章版权声明：除非注明，否则均为主机测评原创文章，转载或复制请以超链接形式并注明出处。

相关阅读

发表评论

快捷回复： 表情：
评论列表 （暂无评论，人围观）

还没有评论，来说两句吧...

目录[+]