一个vue管理系统的初步搭建总结

末蓝、 2021-11-10 08:06 231阅读 0赞

## vue管理系统构建步骤 ##

ps:目前这个项目只是有一个大致的框架，并没有做完

### 前期准备工作 ###

前端构建工具：Visual Studio Code  
后端构建工具：IDEA  
数据库和服务器构建工具：WampServer (使用的是2.4.23版本对的apache，5.7.14版本的MySQL)  
安装10.0以上版本的node

### 前端构建–采用vue+element-ui （vue使用的是3.0以上的版本） ###

1.使用指令vue create project 然后选择相关选项  
2.构建项目目录  
 2.1 vue3.0版本一下目录结构  
  build 这个是我们最终发布的时候会把代码发布在这里，在开发阶段，我们基本不用管。  
    | |-- build.js // 生产环境构建代码  
    | |-- check-version.js // 检查node、npm等版本  
    | |-- dev-client.js // 热重载相关  
    | |-- dev-server.js // 构建本地服务器  
    | |-- utils.js // 构建工具相关  
    | |-- webpack.base.conf.js // webpack基础配置  
    | |-- webpack.dev.conf.js // webpack开发环境配置  
    | |-- webpack.prod.conf.js // webpack生产环境配置  
  config 配置目录，默认配置没有问题，所以我们也不用管  
    | |-- dev.env.js // 开发环境变量  
    | |-- index.js // 项目一些配置变量  
    | |-- prod.env.js // 生产环境变量  
    | |-- test.env.js // 测试环境变量  
  node\_modules 这个目录是存放我们项目开发依赖的一些模块，这里面有很多很多内容，不过高兴的是，我们也不用管  
  src 我们的开发目录，基本上绝大多数工作都是在这里开展的  
  static 资源目录，我们可以把一些图片啊，字体啊，放在这里。  
    | |-- assets // 资源目录  
    | |-- components // vue公共组件  
    | |-- store // vuex的状态管理  
    | |-- App.vue // 页面入口文件  
    | |-- main.js // 程序入口文件，加载各种公共组件  
  test 初始测试目录，没用，删除即可  
  .xxxx文件 这些是一些配置文件，包括语法配置，git配置等。基本不用管，放着就是了  
  index.html 首页入口文件，基本不用管，如果是开发移动端项目，可以在head区域加上你合适的meta头  
  package.json 项目配置文件。前期基本不用管，但是你可以找一下相关的资料，学习一下里面的各项配置。至少，要知道分别是干嘛的。初期就不管了。  
  [README.md][] 不用管  
 2.2vue3.0项目结构  
  noed\_modules 这个目录是存放我们项目开发依赖的一些模块，这里面有很多很多内容，不过高兴的是，我们也不用管  
  public 存放index.html和默认的icon  
  src 开发目录  
     assets 资源目录  
     views 组件视图目录  
     router 路由目录  
     style 样式目录  
     utils 公共组件目录  
     以及一些其他根据项目添加的相关目录等  
  packages.json 项目依赖文件，可以看到相关依赖等  
  vue.config.js 项目配置文件，可以更改相关配置  
3.进入项目目录，执行npm install安装相关依赖库  
4.执行yarn serve或者npm install 来运行项目  
5.配置一些相关的依赖：  
  axios：  
    安装axios：npm install --save axios  
    将axios配置为全局：在main.js文件中引入axios依赖，并添加Vue.prototype.KaTeX parse error: Expected 'EOF', got '&' at position 17: …xios = axios &̲emsp;&emsp;echa…echarts = echart  
  svg-sprite-loader:  
    安装svg-sprite-loader：npm install --save svg-sprite-loader  
    配置svg-sprite-loader:在vue.config.js文件中进行如下配置：

chainWebpack: config => {
        // alias 配置
        config.resolve.alias;
        config.resolve.alias.set ('@', resolve ('src')); //设置@为src路径
        //配置svg
        config.module.rules.delete ('svg');
        config.module.rule ('svg').exclude.add (resolve ('src/icons')).end ();
        config.module
          .rule ('svg-smart')
          .test (/\.svg$/)
          .include.add (resolve ('src/icons/svg'))
          .end ()
          .use ('svg-sprite-loader')
          .loader ('svg-sprite-loader')
          .options ({
            symbolId: '[name]',
          });
      },

##### ps:使用chainWebpack，修改webpack相关配置，强烈建议先熟悉webpack-chain和vue-cli 源码，以便更好地理解这个选项的配置项 #####

前端项目源码地址：[https://github.com/wly13/admin-system][https_github.com_wly13_admin-system]

### 后端采用spring boot来搭建 ###

1.在ide中创建一个JavaWeb项目：打开idea -> file -> new -> project ->spring initialzr -> next,填写maven相关工程配置 -> next,选择web -> next -> finsh。到此一个spring boot的后台项目就初始化成功  
2.认识一个后台系统的目录开发结构：  
  源码目录：src/main/java  
    controller：前端控制器-主要是用于写前端调用的接口  
    dao：数据操作层-主要是写各种数据操作方法的接口  
    domain（bean）：实体类-主要是写后端实体类(必须有无参构造函数，以及get和set)  
    service：数据服务层-service层主要调用dao层的功能实现增删改查  
    utils：工具类-主要用于存放项目的一些公共类  
    config：配置信息类  
    constant：常量接口类  
    Application.java:工程启动类  
  资源目录：src/main/resources  
    i18n:国际化资源  
    application.yml:项目配置文件-主要用于配置数据库访问，系统编码等各种配置  
    static：静态资源目录-主要用于存放各种静态资源  
    templates：模板目录-主要用于存放一些共用的模板  
    mybatis.xml：mybatis配置文件  
    mapper:mybatis映射文件-主要是用于写sql语句  
  测试目录：src/main/test  
  输出目录：target  
  pom.xml：maven配置文件-在 pom.xml 中添加所需要的依赖信息，然后在项目根目录执行 mvn install 命令，maven就会自动下载相关依赖jar包到本地仓库  
3.各个目录下的一些列子  
controller/ListController.java:

package com.example.vue.controller;
    
    import com.example.vue.service.ListService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.web.bind.annotation.*;
    
    import java.util.List;
    import java.util.Map;
    
    @RestController //控制器注解 表示所有数据都以json格式返回
    @CrossOrigin  //跨域注解
    public class ListController {
      @Autowired //自动导入某个bean/domain
      private ListService listService;
    
      @RequestMapping("api/list") //路由注解 请求该类的url
    
      public List<com.example.vue.domain.List> list() {
          return listService.queryAll();
      }
    
      @RequestMapping(value = "api/name", method = RequestMethod.POST, produces = "application/json;charset=UTF-8")
      public List<com.example.vue.domain.List> name( @RequestBody Map<String, String> data ) {
          String name = data.get("name");
          if (!name.equals("")) {
              return listService.queryByName(name);
          } else {
              return listService.queryAll();
          }
    
      }
    
      @RequestMapping(value = "api/addList", method = RequestMethod.POST, produces = "application/json;charset=UTF-8")
      public int  addList( @RequestBody Map<String, String> data ) {
          com.example.vue.domain.List list = new com.example.vue.domain.List();
          String name = data.get("name");
          String sex = Integer.parseInt(data.get("sex")) == 0 ? "女" : "男";
          String age = data.get("age");
          String birthday = data.get("birth");
          String address = data.get("address");
          list.setName(name);
          list.setSex(sex);
          list.setAge(Integer.parseInt(age));
          list.setBirthday(birthday);
          list.setAddress(address);
          return listService.addList(list);
      }
    
      @RequestMapping(value = "api/delList",method = RequestMethod.POST,produces = "application/json;charset=UTF-8")
    
      public int delList(@RequestBody Map<String,String> data){
          int id = Integer.parseInt(data.get("id"));
          System.out.println(id);
          int num = listService.delList(id);
          System.out.println(num);
          return num;
      }
    //    @RequestMapping(value = "api/findAge",method = RequestMethod.POST,produces = "json/application;charset=UTF-8")
    
    //    public com.example.vue.domain.List findAge    (){
    //
    //    }

domain(bean)/List.java

package com.example.vue.domain;
    
    import java.util.Date;
    
    public class List {
        private int id;
        private String name;
        private String sex;
        private int age;
        private String birthday;
        private String address;
    
    //    setter
    
        public void setId( int id ) {
            this.id = id;
        }
    
        public void setName( String name ) {
            this.name = name;
        }
    
        public void setSex( String sex ) {
            this.sex = sex;
        }
    
        public void setAge( int age ) {
            this.age = age;
        }
    
        public void setBirthday( String birthday ) {
            this.birthday = birthday;
        }
    
        public void setAddress( String address ) {
            this.address = address;
        }
    //    getter
    
        public int getId() {
            return id;
        }
    
        public String getName() {
            return name;
        }
    
        public String getSex() {
            return sex;
        }
    
        public int getAge() {
            return age;
        }
    
        public String getBirthday() {
            return birthday;
        }
    
        public String getAddress() {
            return address;
        }
    }

service/ListService.java

package com.example.vue.service;
    
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Service;
    
    import java.util.List;
    
    @Service
    public interface ListService {
        @Autowired
        List<com.example.vue.domain.List> queryAll();
        List<com.example.vue.domain.List> queryByName(String name);
        int addList( com.example.vue.domain.List list );
        int delList(int id);
    }

service/impl/ListServiceImpl.java

package com.example.vue.service.impl;
    
    import com.example.vue.dao.ListDao;
    import com.example.vue.service.ListService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Service;
    
    import java.util.List;
    
    @Service("ListService")
    public class ListServiceImpl implements ListService {
        @Autowired
    
        private ListDao listDao;
    
        public List<com.example.vue.domain.List> queryAll(){
            return listDao.findAll();
        }
    
        public List<com.example.vue.domain.List> queryByName( String name){
            return listDao.queryName(name);
        }
        public int addList( com.example.vue.domain.List list ){
            return listDao.insertList(list);
        }
        public int delList(int id){
            return listDao.deleteList(id);
        }
    }

dao/ListDao.java

package com.example.vue.dao;
    
    import org.apache.ibatis.annotations.Mapper;
    import org.apache.ibatis.annotations.Param;
    import org.springframework.stereotype.Repository;
    
    import java.util.List;
    
    @Mapper
    @Repository
    public interface ListDao {
        List<com.example.vue.domain.List> findAll();
        List<com.example.vue.domain.List> queryName( @Param ("name") String name);
        int insertList( com.example.vue.domain.List list );
        int deleteList(@Param("id") int id);
    }

application.yml:

# DATASOURCE 数据库配置
    spring:
        datasource:
            url: jdbc:mysql://localhost:3306/test?characterEncoding=UTF-8&useSSL=true
            username: root
            password: 123456
            driver-class-name: com.mysql.jdbc.Driver
    
    # MyBatis
    mybatis:
        typeAliasesPackage: com.example.vue.dao.*.dao
        mapperLocations: classpath:/mapper/*.xml
    #    type-aliases-package: classpath:/com.example.vue.domai ,mn.User
    #    configLocation: classpath:/mybatis.xml
    #    typeAliasesPackage:
    
    # 配置Tomcat编码为UTF_8
    server:
        tomcat:
            uri-encoding: utf-8

pom.xml:

<dependency>
                <groupId>mysql</groupId>
                <artifactId>mysql-connector-java</artifactId>
                <version>5.1.41</version>
                <scope>runtime</scope>
            </dependency>
            
            <dependency>
                <groupId>org.mybatis.spring.boot</groupId>
                <artifactId>mybatis-spring-boot-starter</artifactId>
                <version>${mybatis.version}</version>
            </dependency>

mapper/ListMapper.xml：

<?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
            "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
    
    <mapper namespace="com.example.vue.dao.ListDao">
    
        <select id="findAll" resultMap="listResult">SELECT * FROM list</select>
        
        <select id="queryName" resultMap="listResult">SELECT * FROM list where name = #{name}</select>
        <resultMap id="listResult" type="com.example.vue.domain.List">
            <result column="id" property="id"/>
            <result column="name" property="name"/>
            <result column="sex" property="sex"/>
            <result column="age" property="age"/>
            <result column="birthday" property="birthday"/>
            <result column="address" property="address"/>
        </resultMap>
        <insert id="insertList" parameterType="List">
            insert into list(name,sex,age,birthday,address) values (#{name},#{sex},#{age},#{birthday},#{address})
        </insert>
    
        <delete id="deleteList" parameterType="List">
            delete from list where id = #{id}
        </delete>
    </mapper>

以上就是我的一个项目后台的大致目录结构  
后台项目源码地址：[https://github.com/wly13/vue-admin-background-programe][https_github.com_wly13_vue-admin-background-programe]

### 数据库搭建 ###

数据库采用的是wampserver中的mysql，下载wampserver，安装好后启动，等到图标变绿后，点击phpMyAdmin，然后就可以在网页上搭建数据库，当然你也可以选择通过命令来创建数据库以及相关数据  
ps：数据库中的数据存放于后台系统中的database目录下，可以直接放到wampserver中的mysql下的data目录下然后使用，

[README.md]: http://README.md
[https_github.com_wly13_admin-system]: https://github.com/wly13/admin-system
[https_github.com_wly13_vue-admin-background-programe]: https://github.com/wly13/vue-admin-background-programe