面试宝典一 -- 前后端项目环境的搭建

企业开发 2022-04-28 11:27:29 阅读次数: 0

面试宝典

项目介绍

面试宝典是一款面向程序员的面试刷题小程序。针对目前大量毕业学员在毕业之后直接去面试企业
的通过率低的问题，公司研发了面试宝典小程序，学员在空闲时间可以通过查看企业真实面试题，不仅
可以查看企业真题，也可以通过刷题寻找自己的短板进行补充

架构介绍

系统架构

运营管理后台主要面向公司内部运营人员使用，访问人员主要来自公司内部，未来从安全性和访问
量考虑分析，可以和小程序端API接口应用隔离安装部署，所以也需要单独构建一个Web应用。
微信小程序面向前端用户，未来从业务增长速度来讲，可能访问的用户越来越多，故从安全性、可
维护升级和可扩展性等角度分析，微信小程序API接口需要独立安装部署，所以需要单独构建一个Web
应用；
在这里插入图片描述

技术架构

在这里插入图片描述

管理后台功能列表

在这里插入图片描述

前台小程序功能列表

在这里插入图片描述

数据库

在这里插入图片描述

后台管理工程的创建

  1. 创建后台接口springboot项目ms_backend。
  2. 拷贝坐标
  3. 创建包结构, 拷贝pojo, 工具类, 实体类, 配置文件
  4. 拷贝页面

创建springboot工程

在这里插入图片描述

引入依赖

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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.4.12</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
 
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <!-- MySQL数据库连接驱动 -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <!-- mybatis-plus依赖启动器 -->
        <dependency>

            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.3.3</version>
        </dependency>
        <!-- druid数据源连接池依赖 -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.2.8</version>
        </dependency>
        <!-- lombok插件 -->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <!-- SpringBoot单元测试 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <!-- Redis依赖 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-redis</artifactId>
            <version>1.4.7.RELEASE</version>
        </dependency>

        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger2</artifactId>
            <version>2.9.2</version>
        </dependency>


        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger-ui</artifactId>
            <version>2.9.2</version>
        </dependency>

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.58</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <version>2.4.12</version>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>


</project>

配置文件

application.yml

spring:
  datasource:
    #1.JDBC
    type: com.alibaba.druid.pool.DruidDataSource
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/msbd?useUnicode=true&characterEncoding=utf8
    username: root
    password: 123456
    druid:
    #2.连接池配置
	#初始化连接池的连接数量 大小，最小，最大
      initial-size: 5
      min-idle: 5
      max-active: 20
      #配置获取连接等待超时的时间
      max-wait: 60000
      #配置间隔多久才进行一次检测，检测需要关闭的空闲连接，单位是毫秒
      time-between-eviction-runs-millis: 60000
      # 配置一个连接在池中最小生存的时间，单位是毫秒
      min-evictable-idle-time-millis: 30000
      validation-query: SELECT 1 FROM DUAL
      test-while-idle: true
      test-on-borrow: true
      test-on-return: false
# 是否缓存preparedStatement，也就是PSCache 官方建议MySQL下建议关闭 个人建议如果想用SQL防火墙 建议打开
      pool-prepared-statements: true
      max-pool-prepared-statement-per-connection-size: 20
   # 配置监控统计拦截的filters，去掉后监控界面sql无法统计，'wall'用于防火墙
      filter:
        stat:
          merge-sql: true
          slow-sql-millis: 5000
   #3.基础监控配置
      web-stat-filter:
        enabled: true
        url-pattern: /*
   #设置不统计哪些URL
        exclusions: "*.js,*.gif,*.jpg,*.png,*.css,*.ico,/druid/*"
        session-stat-enable: true
        session-stat-max-count: 100
      stat-view-servlet:
        enabled: true
        url-pattern: /druid/*
        reset-enable: true
  #设置监控页面的登录名和密码
        login-username: admin
        login-password: admin
        allow: 127.0.0.1
        #deny: 192.168.1.100

mybatis-plus:
  configuration:
    map-underscore-to-camel-case: false
  mapper-locations: classpath*:/mapper/*.xml
  type-aliases-package: com.blb.msbd.pojo
#    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

# 设置后台服务端端口号
server:
  port: 9001

说明

springboot使用Druid项目地址：

文档地址：https://github.com/alibaba/druid/tree/master/druid-spring-boot-starter
访问地址： http://localhost:tomcat端口号/项目名称/druid/login.html

springboot项目启动后直接访问并登录成功后，直接访问即可：
在这里插入图片描述

前端Vue项目搭建

这里，我们将使用vue提供的脚手架快速搭建vue项目。
官方文档：https://cli.vuejs.org/zh/guide/
快速创建Vue项目的三种方案。前提：先安装好node.js环境。

vue create <Project Name> //文件名 不支持驼峰（含大写字母）

vue create msbd

在这里插入图片描述
default是使用默认配置

Manually select features 是自定义配置
这里我们选择自定义配置

在这里插入图片描述

此页面使用指令创建vue项目，过程中可能进行一些手动选择的初始化。是上下箭头切换选项，使用空
格进行选择与取消。

  • Babel 将ES6代码转ES5 （部分浏览器不支持部分ES6代码）

  • TypeScript JavaScript的超集 （最终需要编译成js）

  • Progressive Web APP 移动端支持

  • Router Vue路由支持

  • VueX Vue的状态管理模式 （数据管理中心）

  • CSS Pre-processors （CSS预处理、可以转为Less、Sass为CSS）

  • linter/Formatter 语法检查格式化工具

  • Unit Testing 单元测试

  • E2E Testing 端对端测试

根据项目需求安装插件,这里选择了Babel,Router,CSS Pre-procrssors,VueX，linter/Formatter
在这里插入图片描述

在这里插入图片描述
vue中普通模式路由后带有# 只切换#后内容
history模式下不带有#

y 回车

在这里插入图片描述

css 的预处理器选择的是 Sass/SCSS(with dart-sass) 。
node-sass是自动编译实时的，dart-sass需要保存后才会生效

sass 官方目前主力推 dart-sass

在这里插入图片描述
这里我选的第一个，选择 ESLint 代码校验规则，提供一个插件化的JavaScript代码检测工具，
ESLint + Prettier 使用较多

在这里插入图片描述

选择什么时候进行代码校验，Lint on save 保存的时候检查，Lint and fix on commit 或者commit 的时候检查，建议选择第一个

在这里插入图片描述

下面就是如何存放配置，In dedicated config files 存放到独立文件中，In package.json 存放到 package.json 中
建议选择 In package.json

在这里插入图片描述
最后就是是否保存本次的配置，N 不记录，如果选择 Y 需要输入保存名字
选择y 下次使用vue脚手架创建项目时可直接选择本次的配置

运行

npm run serve

element-ui引入

项目后期页面部分会使用到element-ui快速搭建vue界面，需要在整个项目中引入。

官网：https://element.eleme.cn/#/zh-CN/component/installation

npm 安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用

npm i element-ui -S

项目中引入element-ui

在main.js

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI)

axios框架配置

axios安装

另外项目真个过程中会发送ajax请求，所以还需要引入axios框架

中文文档：https://www.kancloud.cn/yunye/axios/234845

npm install axios

axios组件封装

如果每一个页面都需要使用axios，都需要import引入，然后创建，发送请求。导致axios实例过多，并
且如果要统一进行设置处理，就需要找到每一个axios进行配置，非常麻烦。

注意：文件夹下的名字叫index的文件在引入的时候是可以省略的。默认就找index名称文件。

import axios from "axios";
import qs from "qs";

// 创建一个axios实例对象
let instance = axios.create({
    
    
    baseURL: 'http://localhost:9001/',
    timeout: 3000,
});

// 添加axios实例请求拦截器，在请求头中添加用户登录的token信息
instance.interceptors.request.use(
    config => {
    
    
        var username = sessionStorage.getItem("userName");

      if (sessionStorage.getItem(username)) {
    
    
          config.headers[username] = sessionStorage.getItem(username);
          config.headers["tokenname"]=username;
      }
      return config;
    },
    error => {
    
    
      return Promise.reject(error);
    }
);

// 定义一个http请求类，封装各种类型的axios请求
class http {
    
    
  // 使用async ... await
  static async awaitGet(url, params) {
    
    
    // console.log(params)
    return await instance.get(url, {
    
     params });
  }
  static async awaitPost(url, params) {
    
    
    // console.log(params)
    return await instance.post(url, qs.stringify(params));
  }
  static get(url, params) {
    
    
    // console.log(params)
    return new instance.get(url, {
    
     params });
  }
  static post(url, params) {
    
    
      // eslint-disable-next-line no-console
    console.log(params)
    return instance.post(url, qs.stringify(params));
  }
  static post2(url, params) {
    
    
    // eslint-disable-next-line no-console
    console.log(params)
    return instance.post(url, params);
  }
}
// 导出
export default http;

其中，设置的interceptors拦截器部分到后面用户登录过程中进行详细说明，此处先做了解。
另外，单独提出了一个发送请求的js文件index.js（并提供好了部分示例）：

import Instance from "./http";

// 登录
export const loginSubmit = params => Instance.post2("/api/user/login", params);
// 退出
export const logout = params => Instance.post2("/api/user/logout", params);
// 用户列表
export const getUserByPage = params => Instance.post2("/api/user/findByPage", params);
//添加用户
export const addUser = params => Instance.post2("/api/user/register", params);
//删除用户
export const deleteUser = params => Instance.post("/api/user/delete", params);
//修改用户
export const updateUser = params => Instance.post2("/api/user/update", params);
//通过id查询用户用于数据回显
export const getUserById = params => Instance.post("/api/user/getUserById", params);

// 获取所有学科列表
export const getCourses = params => Instance.get("/api/course/findAll",params);
// 新增学科
export const addCourse = params => Instance.post2("/api/course/add",params);
//学科管理分页展示学科数据
export const getCourseByPage= params => Instance.post2("/api/course/findByPage",params);
//修改学科
export const updateCourse = params => Instance.post2("/api/course/update",params);
//删除学科
export const deleteCourse = params => Instance.post("/api/course/delete",params);
//查询所有学科
export const getAllCourse= params => Instance.post("/api/course/findAllCourse",params);
//查询所有学科,标签分类
export const findAllCourseCatTag= params => Instance.post("/api/course//findAllCourseCatTag",params);

//基础题库 分页展示题库数据
export const getQuestionByPage= params => Instance.post2("/api/question/findBasicByPage",params);
export const addBasicQuestion= params => Instance.post2("/api/question/addQuestion",params);


//企业
export const getAllCompany= params => Instance.post("/api/company/getAllCompany",params);
//分页查询企业
export const getCompanyByPage = params => Instance.post2("/api/company/findByPage", params);
//新增企业
export const addCompany = params => Instance.post2("/api/company/add",params);
//删除学科
export const deleteCompany = params => Instance.post("/api/company/delete",params);
//地区

export const getDicts= params => Instance.get("/api/company/getDicts",params);

页面改造

1、先删除默认提供的Home.vue、About.vue、HelloWorld.vue等vue文件。
其中，项目的main.js文件为项目的核心入口配置文件;App.vue文件为SPA项目的展示页面。
2、同时根据我们项目展示需要，删除App.vue文件中的两个默认的home、about的router-link标签。
3、另外，可以将提供的06-管理后台前端页面中的一些静态资源复制到项目的assets文件夹下。
4、后续的每一个页面中的样式都有存放在一个css/style.css文件中，也就是每一个页面都需要，所以可
以进行全局导入。
在main.js主入口配置中，导入刚引入的写好的css/style.css文件

后期会根据工具，对每一个页面都改造为单页面的vue文件

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
import './assets/css/style.css'

Vue.config.productionTip = false
Vue.use(ElementUI)
new Vue({
    
    
  router,
  store,
  render: h => h(App)
}).$mount('#app')

猜你喜欢

转载自blog.csdn.net/qq_44866153/article/details/122087032
今日推荐
周排行
Leetcode简单题61~80
解决zookeeper磁盘IO高的问题
多线程相关方法详解
Maven-setting.xml文件详解
Maven 项目的 classpath 理解
渊亭科技大数据笔试题
配置JVM内存分配
计算机网络个人学习笔记 （三）网络层 ：第三部分 连载
js中两个等号(==)和三个等号(===)的区别
用C程序自动打开电脑上的程序
每日归档
更多
2024-09-18(0)
2024-09-17(0)
2024-09-16(0)
2024-09-15(0)
2024-09-14(0)
2024-09-13(0)
2024-09-12(0)
2024-09-11(0)
2024-09-10(0)
2024-09-09(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022