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

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

#### vue ####

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

## 后端 ##

### 三层架构搭建 ###

![在这里插入图片描述][5dc1573d5b09480888b1cd1277205f20.png]

### userServlet类 ###

package com.wedu.servlet; 
    
    import com.fasterxml.jackson.databind.ObjectMapper;
    import com.wedu.dao.UserDao;
    import com.wedu.dao.impl.UserDaoImpl;
    import com.wedu.entity.User;
    import com.wedu.service.UserService;
    
    import javax.servlet.*;
    import javax.servlet.http.*;
    import javax.servlet.annotation.*;
    import java.io.IOException;
    import java.io.PrintWriter;
    import java.util.List;
    
    @WebServlet("/userServlet")
    public class UserServlet extends HttpServlet {
        UserDao userDao = new UserDaoImpl();
        @Override
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            List<User> user = userDao.find();
    
            ObjectMapper objectMapper = new ObjectMapper();
            //将数据库查询的结果封装为一个JSON类型的数据
            String data = objectMapper.writeValueAsString(user);
    
            //设置一下响应的编码格式
            response.setCharacterEncoding("utf-8");
    
            //获取输出流
            PrintWriter printWriter = response.getWriter();
            printWriter.append(data);
        }
    
        @Override
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
                this.doGet(request,response);
    
        }
    }

### 实体类 ###

package com.wedu.entity;
    
    /**
     * @author chunhua
     * @date 2023/11/2 20:39
     */
    public class User {
        private  int id;
        private  int age;
    
        public User() {
        }
    
        public User(int id, int age) {
            this.id = id;
            this.age = age;
        }
    
        public int getId() {
            return id;
        }
    
        public void setId(int id) {
            this.id = id;
        }
    
        public int getAge() {
            return age;
        }
    
        public void setAge(int age) {
            this.age = age;
        }
    
        @Override
        public String toString() {
            return "User{" +
                    "id=" + id +
                    ", age=" + age +
                    '}';
        }
    }

### dao层实现类 ###

package com.wedu.dao.impl;
    
    import com.wedu.dao.UserDao;
    import com.wedu.entity.User;
    import com.wedu.util.JDBCUtils;
    import org.apache.commons.dbutils.QueryRunner;
    import org.apache.commons.dbutils.handlers.ArrayListHandler;
    import org.apache.commons.dbutils.handlers.BeanListHandler;
    
    import java.sql.Connection;
    import java.sql.SQLException;
    import java.util.List;
    
    public class UserDaoImpl implements UserDao {
        Connection connection = null;
        QueryRunner qr = new QueryRunner();
        String sql = null;
        @Override
        public List<User> find() {
            try {
                connection = JDBCUtils.getConnection();
                sql = "select * from user  ";
                qr = new QueryRunner(JDBCUtils.getDataSource());
    //            BeanListHandler<User> handler = new BeanListHandler<>(User.class);
                List<User> result = qr.query(connection, sql, new BeanListHandler<>(User.class));
                return result;
            }catch (Exception e){
                e.printStackTrace();
                return  null;
            }finally {
                try {
                    connection.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
        }
    }

接口：

package com.wedu.dao;
    
    import com.wedu.entity.User;
    
    import java.util.List;
    
    public interface UserDao {
        List<User> find();
    
    }

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

[https://mvnrepository.com/][https_mvnrepository.com]

### maven的安装 ###

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

### pom.xml ###

<?xml version="1.0" encoding="UTF-8"?>
    <project xmlns="http://maven.apache.org/POM/4.0.0"
             xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
        <modelVersion>4.0.0</modelVersion>
    
        <groupId>org.example</groupId>
        <artifactId>VUEdemo1</artifactId>
        <version>1.0-SNAPSHOT</version>
    
        <packaging>war</packaging>
    
    
        <dependencies>
            
            <dependency>
                <groupId>com.mysql</groupId>
                <artifactId>mysql-connector-j</artifactId>
                <version>8.0.33</version>
            </dependency>
    
            
            <dependency>
                <groupId>com.alibaba</groupId>
                <artifactId>druid</artifactId>
                <version>1.2.8</version>
            </dependency>
    
            
            <dependency>
                <groupId>javax.servlet</groupId>
                <artifactId>javax.servlet-api</artifactId>
                <version>4.0.1</version>
                <scope>provided</scope>
            </dependency>
    
            
            <dependency>
                <groupId>commons-dbutils</groupId>
                <artifactId>commons-dbutils</artifactId>
                <version>1.6</version>
            </dependency>
    
    
            
            <dependency>
                <groupId>com.fasterxml.jackson.core</groupId>
                <artifactId>jackson-databind</artifactId>
                <version>2.2.3</version>
            </dependency>
    
            
            <dependency>
                <groupId>com.fasterxml.jackson.core</groupId>
                <artifactId>jackson-core</artifactId>
                <version>2.2.3</version>
            </dependency>
    
    
    
        </dependencies>
    
        <properties>
            <maven.compiler.source>8</maven.compiler.source>
            <maven.compiler.target>8</maven.compiler.target>
        </properties>
    
        <build>
            <plugins>
                <plugin>
                    <groupId>org.apache.tomcat.maven</groupId>
                    <artifactId>tomcat7-maven-plugin</artifactId>
                    <configuration>
    
                        <port>8080</port>  
                        <path>/</path>
                    </configuration>
                    <version>2.2</version>
                </plugin>
            </plugins>
        </build>
    
    </project>

### 运行后端测试 ###

![在这里插入图片描述][3b96e21e398444108174d81e50712c6e.png]

--------------------

![在这里插入图片描述][c740546d0aca4e179368c12a2710bc62.png]

### 前端连接 ###

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

const { defineConfig } = require('@vue/cli-service')
    module.exports = defineConfig({
      // transpileDependencies: true,
     
        devServer: {
          port:8082,
          proxy: {
            '/api': {
              target: 'http://127.0.0.1:8080/',// 后端接口
              changeOrigin: true, // 是否跨域
              pathRewrite: {
                '^/api': '/'
              }
            }
          }
        }
      
    
    })

main.js中引入axios  
![在这里插入图片描述][958d848cb6af4f6e96e29eb1435a56b3.png]  
在utils包下新建一个  
![在这里插入图片描述][039b72dffc1441f1b799012225b6718b.png]

import axios from 'axios'
    
    export function request(config) {
        const request = axios.create({
            baseURL: 'api', // 后端请求端口设置，根据自己的端口进行设置
            timeout: 4000 // 超时时间
        })
    
        // request 请求拦截
        // 可以在请求发送前对请求做一些处理
        // eg.统一加上token，对请求参数统一加密
        request.interceptors.request.use(config => {
            config.headers['Content-Type'] = 'application/json;charset=utf-8';
            // console.log(config);
            // config.headers['token'] = user.token;  // 设置请求头
            return config
        }, error => {
            console.log(error);
        });
    
        // response 响应拦截
        // 可以在接口响应后统一处理结果
        request.interceptors.response.use(
            response => {
                let res = response.data;
                // console.log(res);
                // 如果是返回的文件
                if (response.config.responseType === 'blob') {
                    return res
                }
                // 兼容服务端返回的字符串数据
                if (typeof res === 'string') {
                    // 如果是json字符串，将json字符串转换为json对象
                    res = res ? JSON.parse(res) : res
                }
                return res;
            },
            error => {
                console.log('err' + error) // 控制台打印错误信息，用于调试
    
            })
        // 直接返回
        return request(config)
    }
    
    // export default request

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

<template>
        <div>
            <el-container style="height: 700px; border: 1px solid #eee">
                <el-header style="font-size: 40px; background-color: aquamarine;">学习vue平台</el-header>
                <el-container>
                    <el-aside width="200px">
                        <el-menu :default-openeds="['1', '3']">
                            <el-submenu index="1">
                                <template slot="title"><i class="el-icon-message"></i>系统信息管理</template>
                                <el-menu-item index="1-1">部门管理</el-menu-item>
                                <el-menu-item index="1-2">人员管理</el-menu-item>
                            </el-submenu>
                        </el-menu>
                    </el-aside>
                    <el-main>
                        
                        <el-form :inline="true" :model="searchFrom" class="demo-form-inline">
                            <el-form-item label="姓名">
                                <el-input v-model="searchFrom.name" placeholder="姓名"></el-input>
                            </el-form-item>
                            <el-form-item label="性别">
                                <el-select v-model="searchFrom.gender" placeholder="性别">
                                    <el-option label="男" value="1"></el-option>
                                    <el-option label="女" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="入职日期">
                                <el-date-picker v-model="searchFrom.entrytime" type="daterange" range-separator="至"
                                    start-placeholder="开始日期" end-placeholder="结束日期">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit">查询</el-button>
                            </el-form-item>
                        </el-form>
                        
                        <el-table :data="tableData" >
                            <el-table-column prop="id" label="序列" width="100">
                            </el-table-column>
                            
                            <el-table-column prop="age" label="年龄" width="120">
                            </el-table-column>
                            
                     
                 
                        </el-table>
                    </el-main>
    
                </el-container>
            </el-container>
        </div>
    </template>
     
    <script>
    // import axios from "axios";
    import { request } from "../../utils/request";
    
    export default {
        data() {
            return {
                tableData: [{
                   
                }],
                searchFrom: {
                    name: '',
                    gender: '',
                    entrytime: []
                }
            }
        },
        methods: {
            onSubmit() {
                console.log('submit!');
            },
            queryUserList(){
                request({
                url: '/userServlet'
            }).then(res => {
                console.log(res);
                this.tableData = res;
            }, err => {
                console.log(err);
            })
            }
        },
        mounted() {
            //发送异步请求，获取数据
            // request.get('/userServlet').then((result) =>{
        
            //     this.tableData = result.data;
            // });
            this.queryUserList();
    
        },
        created() {
            
        }
    }
    </script>
    
    <style></style>

### 运行 ###

![在这里插入图片描述][8a3a4ea61f8a46e8956b779400f8012b.png]  
数据从数据库导入成功  
![在这里插入图片描述][fb30852904884223919bfacf61d642a0.png]

[5dc1573d5b09480888b1cd1277205f20.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/f8ad7ae7403f47d6ad159fb2687fb7b4.png
[https_mvnrepository.com]: https://mvnrepository.com/
[Maven_Idea_Maven]: https://blog.csdn.net/fl6881688/article/details/121353872?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522169898144616800182110660%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=169898144616800182110660&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-1-121353872-null-null.142%5Ev96%5Epc_search_result_base8&utm_term=maven%E5%AE%89%E8%A3%85%E4%B8%8E%E9%85%8D%E7%BD%AE&spm=1018.2226.3001.4187
[3b96e21e398444108174d81e50712c6e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/d52f490238a54f9dab062012ecc50187.png
[c740546d0aca4e179368c12a2710bc62.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/951f351c480e47c9bf33283a990cdb66.png
[958d848cb6af4f6e96e29eb1435a56b3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/9bbd4d3cb76a47f8b3d3609d2fafd47b.png
[039b72dffc1441f1b799012225b6718b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/1aefcdfa38d74191aa876ee7c96f70ab.png
[element]: https://element.eleme.cn/#/zh-CN/component/date-picker
[8a3a4ea61f8a46e8956b779400f8012b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/657750918da34d5e94f1a3943288dd08.png
[fb30852904884223919bfacf61d642a0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/adaf3ec7c1674de7804d33fff4f20ca5.png