Vue + elementui + springboot construye un proyecto de marco de separación de front-end y back-end simple

Enlaces a artículos relacionados:

Win10 instala Node.js

Eclipse e IDEA crean un proyecto web Java de Maven

Consejos antes de ver:

La versión de IDEA utilizada en este artículo es la última 2019.1, y la versión JDK es 1.8.0_141.

1. Instale node.js

Artículo de referencia: Instale Node.js en Win10

2. Instale cnpm

Debido a que el complemento de instalación de npm se descarga de un servidor externo, se ve muy afectado por la red y puede ser anormal, por lo que debemos instalar el cnpm de Taobao mirror.

Ejecutando una orden

npm install -g cnpm --registry=http://registry.npm.taobao.org

Ejecutando una orden

cnpm -v

Puedes consultar la versión de cnpm

3. Instale vue-cli

Ejecutando una orden

cnpm install -g @vue/cli

Ejecutando una orden

vue -V

Puede ver la versión instalada

4. Crea un proyecto de Vue

Ejecutando una orden

vue create 项目名

Seleccione el predeterminado para


ingresar al proyectocd vuedemo

Ejecutando una orden

npm run serve

Visite el

proyecto creado con éxito.

5. Instale los componentes relacionados

5.1 Instalar element-ui

cnpm install element-ui --save

5.2 Instalar axios

Axios es una biblioteca HTTP basada en promesas que se puede utilizar en navegadores y node.js. Puede entenderse como ajax.

URL de enlace detallada : axios

Ejecute el siguiente comando para instalar axios

cnpm install axios --save

5.3 Instalar vue-router

Vue Router es el administrador de rutas oficial de Vue.js.

URL de enlace detallada: Vue Router

Ejecute el siguiente comando para instalar vue-router

cnpm install vue-router --save

5.4 Instalar qs

Qs puede serializar el objeto para evitar que no se reciban los datos transmitidos en segundo plano.

Ejecute el siguiente comando para instalar qs

cnpm install qs --save

5.5 Instalar Vuex

Vuex es un modo de gestión de estado + biblioteca para aplicaciones Vue.js. Actúa como un almacén centralizado para todos los componentes de la aplicación y sus reglas garantizan que el estado solo se pueda cambiar de una manera predecible.

URL de enlace detallada : Vuex

Ejecute el siguiente comando para instalar Vuex

cnpm install vuex --save

6. IDEA instala el complemento Vue.js

Haga clic en Archivo-> Configuración ...

Seleccione Complementos -> cuadro de búsqueda e ingrese vue -> Instalar -> Aceptar -> reiniciar IDEA para que el complemento surta efecto.

Desde que instalé el complemento Vue.js, se muestra Instalado.

Haga clic en Archivo -> Configuración… -> Idiomas y marcos -> JavaScripts -> seleccione ECMAScript 6 en la versión de lenguaje JavaScript -> Aceptar

7. IDEA crea un proyecto vacío

Seleccione Proyecto vacío-> Siguiente para

completar el nombre del proyecto-> Finalizar

8. Presenta un nuevo proyecto de vue

Introduzca el proyecto vue recién creado en la estructura del proyecto.

Después de seleccionar el proyecto-> predeterminado el primer elemento Crear módulo a partir de fuentes existentes-Siguiente y

continuar hasta Finalizar.

Verifique el archivo package.json y descubra que los componentes relevantes también están instalados normalmente.

Ejecuta el proyecto

9. Nuevo proyecto springboot

Cree un nuevo módulo Springboot en la estructura del proyecto

Artículo de referencia: Eclipse e IDEA crean un proyecto web Java de Maven Capítulo 2.2.1

10. Implementación sencilla de interacción front-end

10.1 Escribir un proyecto vue

La estructura del directorio es la siguiente

Escriba main.js , introduzca el control element-ui, router.

import Vue from 'vue'
import App from './App.vue'
import router from './router'
//引入element-ui控件
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false
//使用use命令后才起作用
Vue.use(ElementUI)

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

Escriba App.vue .

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>

  export default {
    name: 'App',
  }
</script>

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

Escriba index.js en la carpeta del enrutador

import Vue from 'vue'
import Router from 'vue-router'
//使用懒加载的方式来引入,只有路由被访问的时候才加载
import home from '@/components/Home'
import login from '@/components/Login'

Vue.use(Router)
let router =  new Router({
    
    
  routes: [
    {
    
    
      path:'/',
      name :'login',
      component:login
    },
    {
    
    
      path:'/login',
      name :'login',
      component:login
    },
    {
    
    
      path:'/home',
      name :'home',
      component:home
    }
  ]
})

export default router

Escriba la página de inicio de sesión Login.vue

<template>

  <el-form ref='AccountFrom' :model='account' :rules='rules' lable-position='left' lable-width='0px' class='demo-ruleForm login-container'>
    <h3 class="title">登录系统首页</h3>
    <el-form-item prop="username">
      <el-input type="text" v-model="account.username" auto-complete="off" placeholder="账号"></el-input>
    </el-form-item>
    <el-form-item prop="pwd">
      <el-input type="password" v-model="account.pwd" auto-complete="off" placeholder="密码"></el-input>
    </el-form-item>
    <el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>
    <el-form-item style="width:100%;">
      <el-button type="primary" style="width:100%;" @click.native.prevent='handleLogin'>登录</el-button>
    </el-form-item>
  </el-form>

</template>

<script>
  import axios from 'axios';
  axios.defaults.baseURL = 'http://localhost:8090'
  import qs from 'qs';
  export default {
    name: 'login',
    data() {
      return {
        account: {
          username: '',
          pwd: ''
        },
        rules: {
          username: [{
            required: true,
            message: '请输入账号',
            trigger: 'blur'
          }],
          pwd: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }]
        },
        checked: true
      }
    },
    methods:{
      handleLogin(){
        this.$refs.AccountFrom.validate((valid)=>{

          if(valid){
            //将提交的数据进行封装
            var param = {username : this.account.username,pwd:this.account.pwd};

            axios.post("/system/login", qs.stringify(param)).then((result) => {
              if(result.data.code == '200'){
                //用vue路由跳转到后台主界面
                this.$router.push({path:'/home'});
              } else {
                this.$message({
                  message:result.data.msg,
                  type:'error'
                });
              }
            });

          }else{
            console.log('error submit');
            return false;
          }
        });
      }
    }
  }
</script>

<style>
  body {
    background: #DFE9FB;
  }

  .login-container {
    width: 350px;
    margin-left: 35%;
  }
</style>

Escriba una página de destino exitosa Home.vue

<template>
  <div></div>
</template>

<script>
  export default {
      mounted: function () {
        this.loadData();
      },
    methods: {
      loadData() {
        const h = this.$createElement;

        this.$notify({
          title: '标题名称',
          message: h('i', { style: 'color: teal'}, '登录成功')
        });
      }
    }
  }
</script>

<style>
  body {
    background: #DFE9FB;
  }
</style>

10.2 Escribir un proyecto springboot

Estructura de directorios

Pom.xml presenta dependencias relacionadas

<dependency>
   <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>5.1.48</version>
    <scope>runtime</scope>
</dependency>

<dependency>
    <groupId>org.apache.commons</groupId>
    <artifactId>commons-lang3</artifactId>
    <version>3.10</version>
</dependency>

Escribir application.properties

#服务端口配置
server.port=8090

#数据库连接配置
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/test?useSSL=false&characterEncoding=utf-8
spring.datasource.username=root
spring.datasource.password=root

#Mybatis配置
mybatis.mapper-locations=classpath:mapper/**.xml

Escribe DemoApplication.java

package com.example.demo;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
@MapperScan("com.example.demo.dao")
public class DemoApplication {
    
    

    public static void main(String[] args) {
    
    
        SpringApplication.run(DemoApplication.class, args);
    }

}

Escriba CorsFilter.java para resolver problemas entre dominios

package com.example.demo.filter;

import org.springframework.stereotype.Component;

import javax.servlet.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Component
public class CorsFilter implements Filter{
    
    

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
    
    

    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
    
    
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, PATCH, DELETE, PUT");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requseted-With, Content-Type, Accept");
        filterChain.doFilter(servletRequest, servletResponse);

    }

    @Override
    public void destroy() {
    
    

    }
}

Escribir LoginController.java

package com.example.demo.controller;

import com.example.demo.model.User;
import com.example.demo.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

@RestController
@RequestMapping("/system")
public class LoginController {
    
    

    @Autowired
    private UserService userService;

    @PostMapping("/login")
    public Map<String, Object> Login(User user){
    
    
        Map<String, Object> result = new HashMap<>();

        User user1 = userService.selectByNameAndPWD(user);

        if(user1 == null ){
    
    
            result.put("code", 500);
            result.put("msg", "登录失败");
            return result;
        }

        result.put("code", 200);
        result.put("msg", "登录成功");
        return result;
    }
}

Escribir UserService.java

package com.example.demo.service;

import com.example.demo.dao.UserMapper;
import com.example.demo.model.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class UserService {
    
    

    @Autowired
    private UserMapper userMapper;

    public User selectByNameAndPWD(User user){
    
    
        return userMapper.selectByNameAndPWD(user);
    }
}

Escribir UserMapper.java

package com.example.demo.dao;

import com.example.demo.model.User;
import org.springframework.stereotype.Repository;

@Repository
public interface UserMapper {
    
    

    User selectByNameAndPWD(User user);
}

Escribir User.java

package com.example.demo.model;

public class User {
    
    
    private String id;
    private String username;
    private String pwd;

    public String getId() {
    
    
        return id;
    }

    public void setId(String id) {
    
    
        this.id = id;
    }

    public String getUsername() {
    
    
        return username;
    }

    public void setUsername(String username) {
    
    
        this.username = username;
    }

    public String getPwd() {
    
    
        return pwd;
    }

    public void setPwd(String pwd) {
    
    
        this.pwd = pwd;
    }
}

Escribir UserMapper.xml

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.demo.dao.UserMapper">
    <select id="selectByNameAndPWD" resultType="com.example.demo.model.User" parameterType="com.example.demo.model.User">
        select
            id,username,pwd
        from user
        where username = #{username}
            and pwd = #{pwd}
    </select>
</mapper>

11. Posibles problemas

11.1 No hay un encabezado 'Access-Control-Allow-Origin' presente en el recurso solicitado.

Si se encuentra con los siguientes problemas, entonces no se ha ocupado de los problemas entre dominios.

Consulte la sección 10.2.Escriba CorsFilter.java para resolver problemas entre dominios Solo escribe un filtro.

suplemento

Suplemento 1 homología y dominio cruzado

Misma fuente: el mismo protocolo, nombre de dominio y puerto son iguales.

Dominio cruzado: siempre que exista una diferencia en el protocolo, el nombre de dominio y el puerto, es un dominio cruzado.

Ejemplo: http://www.baidu.com http://es el protocolo, www.baidu.comel nombre de dominio y 80el puerto (se puede omitir el puerto predeterminado).

El siguiente es http://demo/loginun ejemplo de si es del mismo origen

http://demo/usr				同源
https://demo/usr 			不同源，协议不同
http://a.demo/usr 			不同源，域名不同
http://demo:8082/usr		不同源，端口不同