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路徑//配置svgconfig.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/domainprivate ListService listService;@RequestMapping("api/list") //路由注解 請求該類的urlpublic 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;// setterpublic 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;} // getterpublic 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 {@AutowiredList<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 {@Autowiredprivate 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: rootpassword: 123456driver-class-name: com.mysql.jdbc.Driver# MyBatis mybatis:typeAliasesPackage: com.example.vue.dao.*.daomapperLocations: 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目錄下然后使用，

轉載于:https://www.cnblogs.com/Buries/p/11288529.html

總結

以上是生活随笔為你收集整理的一个vue管理系统的初步搭建总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。