一個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.$axios = axios
  echatrs:
    安裝echarts： npm install --save echarts
    將echarts配置爲全局：在main.js文件中引入echarts依賴並添加Vue.prototype.$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

後端採用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:

<!--配置MySQL工具-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.41</version>
            <scope>runtime</scope>
        </dependency>
        <!--springboot和mybatis集成中間件-->
        <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>
    <!--    經過name查詢用戶-->
    <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

在spring boot中，註解很重要，附錄經常使用的註解

@SpringBootApplication：申明讓spring boot自動給程序進行必要的配置，這個配置等同於：

@Configuration ，@EnableAutoConfiguration 和 @ComponentScan 三個配置。

@ResponseBody：表示該方法的返回結果直接寫入HTTP response body中，通常在異步獲取數據時使用，用於構建RESTful的api。在使用@RequestMapping後，返回值一般解析爲跳轉路徑，加上@esponsebody後返回結果不會被解析爲跳轉路徑，而是直接寫入HTTP response body中。好比異步獲取json數據，加上@Responsebody後，會直接返回json數據。該註解通常會配合@RequestMapping一塊兒使用。示例代碼：

@Controller：用於定義控制器類，在spring項目中由控制器負責將用戶發來的URL請求轉發到對應的服務接口（service層），通常這個註解在類中，一般方法須要配合註解@RequestMapping。示例代碼：

@RestController：用於標註控制層組件(如struts中的action)，@ResponseBody和@Controller的合集。示例代碼：

@RequestMapping：提供路由信息，負責URL到Controller中的具體函數的映射。

@EnableAutoConfiguration：SpringBoot自動配置（auto-configuration）：嘗試根據你添加的jar依賴自動配置你的Spring應用。例如，若是你的classpath下存在HSQLDB，而且你沒有手動配置任何數據庫鏈接beans，那麼咱們將自動配置一個內存型（in-memory）數據庫」。你能夠將@EnableAutoConfiguration或者@SpringBootApplication註解添加到一個@Configuration類上來選擇自動配置。若是發現應用了你不想要的特定自動配置類，你可使用@EnableAutoConfiguration註解的排除屬性來禁用它們。

@ComponentScan：表示將該類自動發現掃描組件。我的理解至關於，若是掃描到有@Component、@Controller、@Service等這些註解的類，並註冊爲Bean，能夠自動收集全部的Spring組件，包括@Configuration類。咱們常用@ComponentScan註解搜索beans，並結合@Autowired註解導入。能夠自動收集全部的Spring組件，包括@Configuration類。咱們常用@ComponentScan註解搜索beans，並結合@Autowired註解導入。若是沒有配置的話，Spring Boot會掃描啓動類所在包下以及子包下的使用了@Service,@Repository等註解的類。

@Configuration：至關於傳統的xml配置文件，若是有些第三方庫須要用到xml文件，建議仍然經過@Configuration類做爲項目的配置主類——可使用@ImportResource註解加載xml配置文件。

@Import：用來導入其餘配置類。

@ImportResource：用來加載xml配置文件。

@Autowired：自動導入依賴的bean

@Service：通常用於修飾service層的組件

@Repository：使用@Repository註解能夠確保DAO或者repositories提供異常轉譯，這個註解修飾的DAO或者repositories類會被ComponetScan發現並配置，同時也不須要爲它們提供XML配置項。

@Bean：用@Bean標註方法等價於XML中配置的bean。

@Value：注入Spring boot application.properties配置的屬性的值。示例代碼：

@Inject：等價於默認的@Autowired，只是沒有required屬性；

@Component：泛指組件，當組件很差歸類的時候，咱們可使用這個註解進行標註。

@Bean:至關於XML中的,放在方法的上面，而不是類，意思是產生一個bean,並交給spring管理。

@AutoWired：自動導入依賴的bean。byType方式。把配置好的Bean拿來用，完成屬性、方法的組裝，它能夠對類成員變量、方法及構造函數進行標註，完成自動裝配的工做。當加上（required=false）時，就算找不到bean也不報錯。

@Qualifier：當有多個同一類型的Bean時，能夠用@Qualifier(「name」)來指定。與@Autowired配合使用。@Qualifier限定描述符除了能根據名字進行注入，但能進行更細粒度的控制如何選擇候選者，具體使用方式以下：

@Resource(name=」name」,type=」type」)：沒有括號內內容的話，默認byName。與@Autowired幹相似的事。

數據庫搭建

數據庫採用的是wampserver中的mysql，下載wampserver，安裝好後啓動，等到圖標變綠後，點擊phpMyAdmin，而後就能夠在網頁上搭建數據庫，固然你也能夠選擇經過命令來建立數據庫以及相關數據 ps：數據庫中的數據存放於後臺系統中的database目錄下，能夠直接放到wampserver中的mysql下的data目錄下而後使用，