一个vue管理系统的初步搭建总结
ps:目前這個(gè)項(xiàng)目只是有一個(gè)大致的框架，并沒(méi)有做完
前期準(zhǔn)備工作
前端構(gòu)建工具：Visual Studio Code
后端構(gòu)建工具：IDEA
數(shù)據(jù)庫(kù)和服務(wù)器構(gòu)建工具：WampServer (使用的是2.4.23版本對(duì)的apache，5.7.14版本的MySQL)
安裝10.0以上版本的node
前端構(gòu)建--采用vue+element-ui （vue使用的是3.0以上的版本）
1.使用指令vue create project 然后選擇相關(guān)選項(xiàng)
2.構(gòu)建項(xiàng)目目錄
?2.1 vue3.0版本一下目錄結(jié)構(gòu)
??build 這個(gè)是我們最終發(fā)布的時(shí)候會(huì)把代碼發(fā)布在這里，在開發(fā)階段，我們基本不用管。
????| |-- build.js // 生產(chǎn)環(huán)境構(gòu)建代碼
????| |-- check-version.js // 檢查node、npm等版本
????| |-- dev-client.js // 熱重載相關(guān)
????| |-- dev-server.js // 構(gòu)建本地服務(wù)器
????| |-- utils.js // 構(gòu)建工具相關(guān)
????| |-- webpack.base.conf.js // webpack基礎(chǔ)配置
????| |-- webpack.dev.conf.js // webpack開發(fā)環(huán)境配置
????| |-- webpack.prod.conf.js // webpack生產(chǎn)環(huán)境配置
??config 配置目錄，默認(rèn)配置沒(méi)有問(wèn)題，所以我們也不用管
????| |-- dev.env.js // 開發(fā)環(huán)境變量
????| |-- index.js // 項(xiàng)目一些配置變量
????| |-- prod.env.js // 生產(chǎn)環(huán)境變量
????| |-- test.env.js // 測(cè)試環(huán)境變量
??node_modules 這個(gè)目錄是存放我們項(xiàng)目開發(fā)依賴的一些模塊，這里面有很多很多內(nèi)容，不過(guò)高興的是，我們也不用管
??src 我們的開發(fā)目錄，基本上絕大多數(shù)工作都是在這里開展的
??static 資源目錄，我們可以把一些圖片啊，字體啊，放在這里。
????| |-- assets // 資源目錄
????| |-- components // vue公共組件
????| |-- store // vuex的狀態(tài)管理
????| |-- App.vue // 頁(yè)面入口文件
????| |-- main.js // 程序入口文件，加載各種公共組件
??test 初始測(cè)試目錄，沒(méi)用，刪除即可
??.xxxx文件 這些是一些配置文件，包括語(yǔ)法配置，git配置等。基本不用管，放著就是了
??index.html 首頁(yè)入口文件，基本不用管，如果是開發(fā)移動(dòng)端項(xiàng)目，可以在head區(qū)域加上你合適的meta頭
??package.json 項(xiàng)目配置文件。前期基本不用管，但是你可以找一下相關(guān)的資料，學(xué)習(xí)一下里面的各項(xiàng)配置。至少，要知道分別是干嘛的。初期就不管了。
??README.md 不用管
?2.2vue3.0項(xiàng)目結(jié)構(gòu)
??noed_modules 這個(gè)目錄是存放我們項(xiàng)目開發(fā)依賴的一些模塊，這里面有很多很多內(nèi)容，不過(guò)高興的是，我們也不用管
??public 存放index.html和默認(rèn)的icon
??src 開發(fā)目錄
???? assets 資源目錄
???? views 組件視圖目錄
???? router 路由目錄
???? style 樣式目錄
???? utils 公共組件目錄
???? 以及一些其他根據(jù)項(xiàng)目添加的相關(guān)目錄等
??packages.json 項(xiàng)目依賴文件，可以看到相關(guān)依賴等
??vue.config.js 項(xiàng)目配置文件，可以更改相關(guān)配置
3.進(jìn)入項(xiàng)目目錄，執(zhí)行npm install安裝相關(guān)依賴庫(kù)
4.執(zhí)行yarn serve或者npm install 來(lái)運(yùn)行項(xiàng)目
5.配置一些相關(guān)的依賴：
??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文件中進(jìn)行如下配置：
ps:使用chainWebpack，修改webpack相關(guān)配置，強(qiáng)烈建議先熟悉webpack-chain和vue-cli 源碼，以便更好地理解這個(gè)選項(xiàng)的配置項(xiàng)
前端項(xiàng)目源碼地址：https://github.com/wly13/admin-system
后端采用spring boot來(lái)搭建
1.在ide中創(chuàng)建一個(gè)JavaWeb項(xiàng)目：打開idea -> file -> new -> project ->spring initialzr -> next,填寫maven相關(guān)工程配置 -> next,選擇web -> next -> finsh。到此一個(gè)spring boot的后臺(tái)項(xiàng)目就初始化成功
2.認(rèn)識(shí)一個(gè)后臺(tái)系統(tǒng)的目錄開發(fā)結(jié)構(gòu)：
??源碼目錄：src/main/java
????controller：前端控制器-主要是用于寫前端調(diào)用的接口
????dao：數(shù)據(jù)操作層-主要是寫各種數(shù)據(jù)操作方法的接口
????domain（bean）：實(shí)體類-主要是寫后端實(shí)體類(必須有無(wú)參構(gòu)造函數(shù)，以及get和set)
????service：數(shù)據(jù)服務(wù)層-service層主要調(diào)用dao層的功能實(shí)現(xiàn)增刪改查
????utils：工具類-主要用于存放項(xiàng)目的一些公共類
????config：配置信息類
????constant：常量接口類
????Application.java:工程啟動(dòng)類
??資源目錄：src/main/resources
????i18n:國(guó)際化資源
????application.yml:項(xiàng)目配置文件-主要用于配置數(shù)據(jù)庫(kù)訪問(wèn)，系統(tǒng)編碼等各種配置
????static：靜態(tài)資源目錄-主要用于存放各種靜態(tài)資源
????templates：模板目錄-主要用于存放一些共用的模板
????mybatis.xml：mybatis配置文件
????mapper:mybatis映射文件-主要是用于寫sql語(yǔ)句
??測(cè)試目錄：src/main/test
??輸出目錄：target
??pom.xml：maven配置文件-在 pom.xml 中添加所需要的依賴信息，然后在項(xiàng)目根目錄執(zhí)行 mvn install 命令，maven就會(huì)自動(dòng)下載相關(guān)依賴jar包到本地倉(cāng)庫(kù)
3.各個(gè)目錄下的一些列子
controller/ListController.java:
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 數(shù)據(jù)庫(kù)配置 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-8pom.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><!-- 通過(guò)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>以上就是我的一個(gè)項(xiàng)目后臺(tái)的大致目錄結(jié)構(gòu)
后臺(tái)項(xiàng)目源碼地址：https://github.com/wly13/vue-admin-background-programe
在spring boot中，注解很重要，附錄常用的注解
@SpringBootApplication：申明讓spring boot自動(dòng)給程序進(jìn)行必要的配置，這個(gè)配置等同于：
@Configuration?，@EnableAutoConfiguration?和 @ComponentScan?三個(gè)配置。
@ResponseBody：表示該方法的返回結(jié)果直接寫入HTTP response body中，一般在異步獲取數(shù)據(jù)時(shí)使用，用于構(gòu)建RESTful的api。在使用@RequestMapping后，返回值通常解析為跳轉(zhuǎn)路徑，加上@esponsebody后返回結(jié)果不會(huì)被解析為跳轉(zhuǎn)路徑，而是直接寫入HTTP response body中。比如異步獲取json數(shù)據(jù)，加上@Responsebody后，會(huì)直接返回json數(shù)據(jù)。該注解一般會(huì)配合@RequestMapping一起使用。示例代碼：
@Controller：用于定義控制器類，在spring項(xiàng)目中由控制器負(fù)責(zé)將用戶發(fā)來(lái)的URL請(qǐng)求轉(zhuǎn)發(fā)到對(duì)應(yīng)的服務(wù)接口（service層），一般這個(gè)注解在類中，通常方法需要配合注解@RequestMapping。示例代碼：
@RestController：用于標(biāo)注控制層組件(如struts中的action)，@ResponseBody和@Controller的合集。示例代碼：
@RequestMapping：提供路由信息，負(fù)責(zé)URL到Controller中的具體函數(shù)的映射。
@EnableAutoConfiguration：SpringBoot自動(dòng)配置（auto-configuration）：嘗試根據(jù)你添加的jar依賴自動(dòng)配置你的Spring應(yīng)用。例如，如果你的classpath下存在HSQLDB，并且你沒(méi)有手動(dòng)配置任何數(shù)據(jù)庫(kù)連接beans，那么我們將自動(dòng)配置一個(gè)內(nèi)存型（in-memory）數(shù)據(jù)庫(kù)”。你可以將@EnableAutoConfiguration或者@SpringBootApplication注解添加到一個(gè)@Configuration類上來(lái)選擇自動(dòng)配置。如果發(fā)現(xiàn)應(yīng)用了你不想要的特定自動(dòng)配置類，你可以使用@EnableAutoConfiguration注解的排除屬性來(lái)禁用它們。
@ComponentScan：表示將該類自動(dòng)發(fā)現(xiàn)掃描組件。個(gè)人理解相當(dāng)于，如果掃描到有@Component、@Controller、@Service等這些注解的類，并注冊(cè)為Bean，可以自動(dòng)收集所有的Spring組件，包括@Configuration類。我們經(jīng)常使用@ComponentScan注解搜索beans，并結(jié)合@Autowired注解導(dǎo)入。可以自動(dòng)收集所有的Spring組件，包括@Configuration類。我們經(jīng)常使用@ComponentScan注解搜索beans，并結(jié)合@Autowired注解導(dǎo)入。如果沒(méi)有配置的話，Spring Boot會(huì)掃描啟動(dòng)類所在包下以及子包下的使用了@Service,@Repository等注解的類。
@Configuration：相當(dāng)于傳統(tǒng)的xml配置文件，如果有些第三方庫(kù)需要用到xml文件，建議仍然通過(guò)@Configuration類作為項(xiàng)目的配置主類——可以使用@ImportResource注解加載xml配置文件。
@Import：用來(lái)導(dǎo)入其他配置類。
@ImportResource：用來(lái)加載xml配置文件。
@Autowired：自動(dòng)導(dǎo)入依賴的bean
@Service：一般用于修飾service層的組件
@Repository：使用@Repository注解可以確保DAO或者repositories提供異常轉(zhuǎn)譯，這個(gè)注解修飾的DAO或者repositories類會(huì)被ComponetScan發(fā)現(xiàn)并配置，同時(shí)也不需要為它們提供XML配置項(xiàng)。
@Bean：用@Bean標(biāo)注方法等價(jià)于XML中配置的bean。
@Value：注入Spring boot application.properties配置的屬性的值。示例代碼：
@Inject：等價(jià)于默認(rèn)的@Autowired，只是沒(méi)有required屬性；
@Component：泛指組件，當(dāng)組件不好歸類的時(shí)候，我們可以使用這個(gè)注解進(jìn)行標(biāo)注。
@Bean:相當(dāng)于XML中的,放在方法的上面，而不是類，意思是產(chǎn)生一個(gè)bean,并交給spring管理。
@AutoWired：自動(dòng)導(dǎo)入依賴的bean。byType方式。把配置好的Bean拿來(lái)用，完成屬性、方法的組裝，它可以對(duì)類成員變量、方法及構(gòu)造函數(shù)進(jìn)行標(biāo)注，完成自動(dòng)裝配的工作。當(dāng)加上（required=false）時(shí)，就算找不到bean也不報(bào)錯(cuò)。
@Qualifier：當(dāng)有多個(gè)同一類型的Bean時(shí)，可以用@Qualifier(“name”)來(lái)指定。與@Autowired配合使用。@Qualifier限定描述符除了能根據(jù)名字進(jìn)行注入，但能進(jìn)行更細(xì)粒度的控制如何選擇候選者，具體使用方式如下：
@Resource(name=”name”,type=”type”)：沒(méi)有括號(hào)內(nèi)內(nèi)容的話，默認(rèn)byName。與@Autowired干類似的事。
數(shù)據(jù)庫(kù)搭建
數(shù)據(jù)庫(kù)采用的是wampserver中的mysql，下載wampserver，安裝好后啟動(dòng)，等到圖標(biāo)變綠后，點(diǎn)擊phpMyAdmin，然后就可以在網(wǎng)頁(yè)上搭建數(shù)據(jù)庫(kù)，當(dāng)然你也可以選擇通過(guò)命令來(lái)創(chuàng)建數(shù)據(jù)庫(kù)以及相關(guān)數(shù)據(jù) ps：數(shù)據(jù)庫(kù)中的數(shù)據(jù)存放于后臺(tái)系統(tǒng)中的database目錄下，可以直接放到wampserver中的mysql下的data目錄下然后使用，
轉(zhuǎn)載于:https://www.cnblogs.com/Buries/p/11288529.html
總結(jié)
以上是生活随笔為你收集整理的一个vue管理系统的初步搭建总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： LeetCode - 785. Is G
- 下一篇： LeetCode - 695. Max