vue项目实战-前后端分离与结合

柔情只为你懂 2024-04-06 14:54 231阅读 0赞

vue

  • 后端
    • 三层架构搭建
    • userServlet类
    • 实体类
    • dao层实现类
    • mvn仓库：（获取相关的坐标，jar包等）
    • maven的安装
    • pom.xml
    • 运行后端测试
    • 前端连接
    • 运行

后端

三层架构搭建

在这里插入图片描述

userServlet类

  1. package com.wedu.servlet; 
  3. import com.fasterxml.jackson.databind.ObjectMapper;
  4. import com.wedu.dao.UserDao;
  5. import com.wedu.dao.impl.UserDaoImpl;
  6. import com.wedu.entity.User;
  7. import com.wedu.service.UserService;
  9. import javax.servlet.*;
  10. import javax.servlet.http.*;
  11. import javax.servlet.annotation.*;
  12. import java.io.IOException;
  13. import java.io.PrintWriter;
  14. import java.util.List;
  16. @WebServlet("/userServlet")
  17. public class UserServlet extends HttpServlet {
  18.     UserDao userDao = new UserDaoImpl();
  19.     @Override
  20.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  21.         List<User> user = userDao.find();
  23.         ObjectMapper objectMapper = new ObjectMapper();
  24.         //将数据库查询的结果封装为一个JSON类型的数据
  25.         String data = objectMapper.writeValueAsString(user);
  27.         //设置一下响应的编码格式
  28.         response.setCharacterEncoding("utf-8");
  30.         //获取输出流
  31.         PrintWriter printWriter = response.getWriter();
  32.         printWriter.append(data);
  33.     }
  35.     @Override
  36.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  38.             this.doGet(request,response);
  40.     }
  41. }

实体类

  1. package com.wedu.entity;
  3. /**
  4.  * @author chunhua
  5.  * @date 2023/11/2 20:39
  6.  */
  7. public class User {
  8.     private  int id;
  9.     private  int age;
  11.     public User() {
  12.     }
  14.     public User(int id, int age) {
  15.         this.id = id;
  16.         this.age = age;
  17.     }
  19.     public int getId() {
  20.         return id;
  21.     }
  23.     public void setId(int id) {
  24.         this.id = id;
  25.     }
  27.     public int getAge() {
  28.         return age;
  29.     }
  31.     public void setAge(int age) {
  32.         this.age = age;
  33.     }
  35.     @Override
  36.     public String toString() {
  37.         return "User{" +
  38.                 "id=" + id +
  39.                 ", age=" + age +
  40.                 '}';
  41.     }
  42. }

dao层实现类

  1. package com.wedu.dao.impl;
  3. import com.wedu.dao.UserDao;
  4. import com.wedu.entity.User;
  5. import com.wedu.util.JDBCUtils;
  6. import org.apache.commons.dbutils.QueryRunner;
  7. import org.apache.commons.dbutils.handlers.ArrayListHandler;
  8. import org.apache.commons.dbutils.handlers.BeanListHandler;
  10. import java.sql.Connection;
  11. import java.sql.SQLException;
  12. import java.util.List;
  14. public class UserDaoImpl implements UserDao {
  15.     Connection connection = null;
  16.     QueryRunner qr = new QueryRunner();
  17.     String sql = null;
  18.     @Override
  19.     public List<User> find() {
  20.         try {
  21.             connection = JDBCUtils.getConnection();
  22.             sql = "select * from user  ";
  23.             qr = new QueryRunner(JDBCUtils.getDataSource());
  24. //            BeanListHandler<User> handler = new BeanListHandler<>(User.class);
  25.             List<User> result = qr.query(connection, sql, new BeanListHandler<>(User.class));
  26.             return result;
  27.         }catch (Exception e){
  28.             e.printStackTrace();
  29.             return  null;
  30.         }finally {
  31.             try {
  32.                 connection.close();
  33.             } catch (SQLException e) {
  34.                 e.printStackTrace();
  35.             }
  36.         }
  37.     }
  38. }

接口：

  1. package com.wedu.dao;
  3. import com.wedu.entity.User;
  5. import java.util.List;
  7. public interface UserDao {
  8.     List<User> find();
  10. }

mvn仓库：（获取相关的坐标，jar包等）

https://mvnrepository.com/

maven的安装

参考这篇博客： Maven安装与配置，Idea配置Maven

pom.xml

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <project xmlns="http://maven.apache.org/POM/4.0.0"
  3.          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  4.          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  5.     <modelVersion>4.0.0</modelVersion>
  7.     <groupId>org.example</groupId>
  8.     <artifactId>VUEdemo1</artifactId>
  9.     <version>1.0-SNAPSHOT</version>
  11.     <packaging>war</packaging>
  14.     <dependencies>
  15.         <!-- https://mvnrepository.com/artifact/com.mysql/mysql-connector-j -->
  16.         <dependency>
  17.             <groupId>com.mysql</groupId>
  18.             <artifactId>mysql-connector-j</artifactId>
  19.             <version>8.0.33</version>
  20.         </dependency>
  22.         <!-- https://mvnrepository.com/artifact/com.alibaba/druid -->
  23.         <dependency>
  24.             <groupId>com.alibaba</groupId>
  25.             <artifactId>druid</artifactId>
  26.             <version>1.2.8</version>
  27.         </dependency>
  29.         <!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
  30.         <dependency>
  31.             <groupId>javax.servlet</groupId>
  32.             <artifactId>javax.servlet-api</artifactId>
  33.             <version>4.0.1</version>
  34.             <scope>provided</scope>
  35.         </dependency>
  37.         <!-- https://mvnrepository.com/artifact/commons-dbutils/commons-dbutils -->
  38.         <dependency>
  39.             <groupId>commons-dbutils</groupId>
  40.             <artifactId>commons-dbutils</artifactId>
  41.             <version>1.6</version>
  42.         </dependency>
  45.         <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
  46.         <dependency>
  47.             <groupId>com.fasterxml.jackson.core</groupId>
  48.             <artifactId>jackson-databind</artifactId>
  49.             <version>2.2.3</version>
  50.         </dependency>
  52.         <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-core -->
  53.         <dependency>
  54.             <groupId>com.fasterxml.jackson.core</groupId>
  55.             <artifactId>jackson-core</artifactId>
  56.             <version>2.2.3</version>
  57.         </dependency>
  61.     </dependencies>
  63.     <properties>
  64.         <maven.compiler.source>8</maven.compiler.source>
  65.         <maven.compiler.target>8</maven.compiler.target>
  66.     </properties>
  68.     <build>
  69.         <plugins>
  70.             <plugin>
  71.                 <groupId>org.apache.tomcat.maven</groupId>
  72.                 <artifactId>tomcat7-maven-plugin</artifactId>
  73.                 <configuration>
  74. <!--                    端口号-->
  75.                     <port>8080</port>  
  76.                     <path>/</path>
  77.                 </configuration>
  78.                 <version>2.2</version>
  79.             </plugin>
  80.         </plugins>
  81.     </build>
  83. </project>

运行后端测试

在这里插入图片描述

在这里插入图片描述

前端连接

后端接口写在vue.config.js中

  1. const { defineConfig } = require('@vue/cli-service')
  2. module.exports = defineConfig({
  3.   // transpileDependencies: true,
  5.     devServer: {
  6.       port:8082,
  7.       proxy: {
  8.         '/api': {
  9.           target: 'http://127.0.0.1:8080/',// 后端接口
  10.           changeOrigin: true, // 是否跨域
  11.           pathRewrite: {
  12.             '^/api': '/'
  13.           }
  14.         }
  15.       }
  16.     }
  19. })

main.js中引入axios
在这里插入图片描述
在utils包下新建一个
在这里插入图片描述

  1. import axios from 'axios'
  3. export function request(config) {
  4.     const request = axios.create({
  5.         baseURL: 'api', // 后端请求端口设置，根据自己的端口进行设置
  6.         timeout: 4000 // 超时时间
  7.     })
  9.     // request 请求拦截
  10.     // 可以在请求发送前对请求做一些处理
  11.     // eg.统一加上token，对请求参数统一加密
  12.     request.interceptors.request.use(config => {
  13.         config.headers['Content-Type'] = 'application/json;charset=utf-8';
  14.         // console.log(config);
  15.         // config.headers['token'] = user.token;  // 设置请求头
  16.         return config
  17.     }, error => {
  18.         console.log(error);
  19.     });
  21.     // response 响应拦截
  22.     // 可以在接口响应后统一处理结果
  23.     request.interceptors.response.use(
  24.         response => {
  25.             let res = response.data;
  26.             // console.log(res);
  27.             // 如果是返回的文件
  28.             if (response.config.responseType === 'blob') {
  29.                 return res
  30.             }
  31.             // 兼容服务端返回的字符串数据
  32.             if (typeof res === 'string') {
  33.                 // 如果是json字符串，将json字符串转换为json对象
  34.                 res = res ? JSON.parse(res) : res
  35.             }
  36.             return res;
  37.         },
  38.         error => {
  39.             console.log('err' + error) // 控制台打印错误信息，用于调试
  41.         })
  42.     // 直接返回
  43.     return request(config)
  44. }
  46. // export default request

新建一个vue文件，实现前端页面，数据传入前端页面
组件官网element

  1. <template>
  2.     <div>
  3.         <el-container style="height: 700px; border: 1px solid #eee">
  4.             <el-header style="font-size: 40px; background-color: aquamarine;">学习vue平台</el-header>
  5.             <el-container>
  6.                 <el-aside width="200px">
  7.                     <el-menu :default-openeds="['1', '3']">
  8.                         <el-submenu index="1">
  9.                             <template slot="title"><i class="el-icon-message"></i>系统信息管理</template>
  10.                             <el-menu-item index="1-1">部门管理</el-menu-item>
  11.                             <el-menu-item index="1-2">人员管理</el-menu-item>
  12.                         </el-submenu>
  13.                     </el-menu>
  14.                 </el-aside>
  15.                 <el-main>
  16.                     <!-- 表单 -->
  17.                     <el-form :inline="true" :model="searchFrom" class="demo-form-inline">
  18.                         <el-form-item label="姓名">
  19.                             <el-input v-model="searchFrom.name" placeholder="姓名"></el-input>
  20.                         </el-form-item>
  21.                         <el-form-item label="性别">
  22.                             <el-select v-model="searchFrom.gender" placeholder="性别">
  23.                                 <el-option label="男" value="1"></el-option>
  24.                                 <el-option label="女" value="2"></el-option>
  25.                             </el-select>
  26.                         </el-form-item>
  27.                         <el-form-item label="入职日期">
  28.                             <el-date-picker v-model="searchFrom.entrytime" type="daterange" range-separator="至"
  29.                                 start-placeholder="开始日期" end-placeholder="结束日期">
  30.                             </el-date-picker>
  31.                         </el-form-item>
  32.                         <el-form-item>
  33.                             <el-button type="primary" @click="onSubmit">查询</el-button>
  34.                         </el-form-item>
  35.                     </el-form>
  36.                     <!-- 表格 -->
  37.                     <el-table :data="tableData" >
  38.                         <el-table-column prop="id" label="序列" width="100">
  39.                         </el-table-column>
  40.                         <!-- <el-table-column prop="date" label="日期" width="140">
  41.                 </el-table-column>
  42.                 <el-table-column prop="name" label="姓名" width="120">
  43.                 </el-table-column> -->
  44.                         <el-table-column prop="age" label="年龄" width="120">
  45.                         </el-table-column>
  46.                         <!-- <el-table-column prop="address" label="地址">
  47.                 </el-table-column> -->
  50.                     </el-table>
  51.                 </el-main>
  53.             </el-container>
  54.         </el-container>
  55.     </div>
  56. </template>
  58. <script>
  59. // import axios from "axios";
  60. import { request } from "../../utils/request";
  62. export default {
  63.     data() {
  64.         return {
  65.             tableData: [{
  67.             }],
  68.             searchFrom: {
  69.                 name: '',
  70.                 gender: '',
  71.                 entrytime: []
  72.             }
  73.         }
  74.     },
  75.     methods: {
  76.         onSubmit() {
  77.             console.log('submit!');
  78.         },
  79.         queryUserList(){
  80.             request({
  81.             url: '/userServlet'
  82.         }).then(res => {
  83.             console.log(res);
  84.             this.tableData = res;
  85.         }, err => {
  86.             console.log(err);
  87.         })
  88.         }
  89.     },
  90.     mounted() {
  91.         //发送异步请求，获取数据
  92.         // request.get('/userServlet').then((result) =>{
  94.         //     this.tableData = result.data;
  95.         // });
  96.         this.queryUserList();
  98.     },
  99.     created() {
  101.     }
  102. }
  103. </script>
  105. <style></style>

运行

在这里插入图片描述
数据从数据库导入成功
在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，231人围观）

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

相关阅读

    相关 vue-前后端分离问题

    前后端分离的项目第一个遇到的拦路虎应该就是 前后端分离所导致的跨域问题了。在vue.js里面，前后端分离里面，前端可以做的事情有： 1.修改 config/index.js里

    Bertha 。Bertha 。/ 0 赞/ 94 阅读