过程

1.构建前端

使用到的工具:
  • 套件工具-用来安装依赖
    • yarn(此篇文章选用)
    • npm
  • 前端构建工具:
    • webpack
    • vite(此篇文章选用)
    • nuxt.js
  • 前端框架
    • Vue(此篇文章选用)
    • react
  • 前端语言
    • typescript
    • javascript(此篇文章选用)
  • 前端渲染框架
    • semidesign-不支持vue
    • Element ui(此篇文章选用)
步骤:

1.安装yarn,使用yarn构建web项目的前端部分。
在使用yarn时可能会碰到一个问题:无法加载文件 C:\Users\28011\AppData\Roaming\npm\yarn.ps1,因为在此系统上禁止运行脚本

解决方案为:
 (1)搜索powershell, 右键以管理员身份运行。
 (2)执行set-ExecutionPolicy RemoteSigned,将计算机上的 执行策略更改为 RemoteSigned

解决这个问题之后,就可以使用vite来生成前端的项目了。
具体操作见Vite官方文档。
https://cn.vitejs.dev/guide/#scaffolding-your-first-vite-project
运行成功之后会显示:
运行成功
访问生成的链接。
2.在vscode中打开刚才yarn生成的项目,根据你的需求,更改项目的配置。
此处以在项目中配置css渲染框架Element ui为例,来说明如何按需配置。
(1)首先根据Element官方给出的文档,安装Element。
安装Element
(2)再按需导入所要使用的插件。

使用自动导入的方式:

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

npm install -D unplugin-vue-components unplugin-auto-import

然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中

Vite

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default {
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

(3)完成上述步骤之后,你就可以去Element中找到你心仪的组件并把相应的代码copy到你想要的位置即可。

2.构建后端

按照spring项目的传统编写方式,写完bean、mapper、service、controller等之后。使用postman模拟前端向后端发送请求。
  • 在controller中要用ResponseBody来接受前端发来的请求体。
@PostMapping("/login")
    public Object login(@RequestBody User user) {
        System.out.println(user.getUsername());
        User user1 = userService.findByUsername(user.getUsername());
        LoginResponse loginResponse = new LoginResponse();
        if (user1 == null) {
            loginResponse.setHttpStatus(HttpStatus.BAD_REQUEST);
            loginResponse.setMessage("User not exist");
            return new ResponseEntity(loginResponse, HttpStatus.BAD_REQUEST);
        } else if (!user1.getPassword().equals(user.getPassword())) {
            loginResponse.setHttpStatus(HttpStatus.BAD_REQUEST);
            loginResponse.setMessage("User password error");
            return new ResponseEntity(loginResponse, HttpStatus.BAD_REQUEST);
        }
        loginResponse.setMessage("Login success");
        loginResponse.setToken("123");
        loginResponse.setHttpStatus(HttpStatus.OK);
        return loginResponse;
    }
}
  • 前端向后端发送请求时,因为域名的不同,涉及到跨域问题。请求会发送失败。此时需要在后端中新建一个config文件,在其中新建一个WebConfig.java文件,在文件中写入:就可以解决跨域访问问题了。
package com.example.demo_backend.config;

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

@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**");
    }
}
  • 后端响应前端的请求,我们需要新建一个response文件夹,在文件夹下新建一个LoginResponse.class文件,保存响应前端login请求的信息。
package com.example.demo_backend.response;

import org.springframework.http.HttpStatus;

public class LoginResponse {
//主要是这三个信息,作为响应返回前端
    private String message;
    private String token;
    private HttpStatus httpStatus;

    public LoginResponse() {
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public String getToken() {
        return token;
    }

    public void setToken(String token) {
        this.token = token;
    }

    public HttpStatus getHttpStatus() {
        return httpStatus;
    }

    public void setHttpStatus(HttpStatus httpStatus) {
        this.httpStatus = httpStatus;
    }
}
  • 此时回头查看第一条,就会发现我们在controller的方法中将loginResponse返回到了前端。
  • 此处顺便提一下,mapper的注解式写法,我把代码放在这里,应该很容易看懂。
package com.example.demo_backend.mapper;

import com.example.demo_backend.bean.User;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Options;
import org.apache.ibatis.annotations.Select;
import org.springframework.stereotype.Repository;

@Mapper
@Repository
public interface UserMapper {
    @Insert("insert into User (id, email, tel, username, password) values (#{id}, #{email}, #{tel}, #{username}, #{password})")
    @Options(useGeneratedKeys = true, keyProperty = "id")
    Boolean insertUser(User user);

    @Select("select * from User where username=#{username}")
    User findUserByUsername(String username);
}

到此,后端的所有应该清晰了起来。
目录结构

3.前后端连接

1.配置“Vue-router”(路由),使通过连接跳转至相应的网页(纯前端问题)。
  • 使用yarn add vue-router 指令下载Vue-router依赖。
  • 在全局的配置文件main.js中配置vue-router。
 import router from './router'

//此处要格外注意代码先后顺序的问题,否则就会导致vue-rooter加载异常
 const app = createApp(App)
 app.use(router)
 app.mount('#app')
  • 创建一个新的文件夹router,在这个文件夹下面新建一个index.js文件,用来配置页面跳转。
  • (此处假设你已经编写好了相关的需要跳转的页面),然后就可以去配置Index.js中的页面跳转了。
import { createRouter, createWebHistory } from "vue-router";

const routes = [
//这里放配置页面跳转的代码,path是访问的路径,component指向相应要跳转的页面。
    {
        path: "/",
        name: "Home",
        component: () => import("../views/Home.vue"),
    },
    {
        path: "/login",
        name: "Login",
        component: () => import("../views/Login.vue"),
    },
];

const router = createRouter({
    history: createWebHistory(),
    routes,
});
export default router;
2.配置axios, 实现前端向后端的请求。
  • 使用yarn add axios下载依赖。
  • 在全局配置文件main.js中配置axios。
import axios from 'axios'

//这里写后端的端口号
axios.defaults.baseURL = "http://127.0.0.1:8080"
  • 在需要向后端发送请求的页面中导入axios,并且编写向后端发送请求的代码。
<script>

import { reactive } from "vue"
import axios from "axios"
import { ElMessage } from "element-plus"

 const onSubmit = () => {
            console.log("submit");
            //向后端发送请求,并且等待接受后端返回的回应。
            return axios.post("/user/login", form).then(res=>{
                console.log(res.data);
                ElMessage({
                    message: res.data.message,
                    type:'success'
                });
            }).catch(e => {
                ElMessage.error(e.response.data)
            })
  • 注意,使用yarn生成项目之后,默认App.vue是前端界面的入口。要在App.vue界面中加入。就可以正常跳转了。
<template>
<!-- 整個頁面的入口 -->
<router-view />

</template>
Logo

前往低代码交流专区

更多推荐