第一步：安裝Node
1、打開NodeJS的官網，下載和自己系統相配的NodeJS的安裝程序，包括32位還是64位一定要選擇好，否則會出現安裝問題。
下載地址：https://nodejs.org/en/download/
我選擇的是Window版本64位的安裝程序，也有MAC平台的安裝程序。
下載完成，如圖:
2、接下來就是安裝了，安裝很簡單，直接下一步下一步就可以，但是我也把流程記錄下來，給第一次看本教程的人有一個大概的了解。
雙擊安裝文件，如圖：
3、點擊下一步，選擇同意協議，否則無法繼續安裝。如圖：
4、這一步選擇安裝的目錄，可以使用默認目錄【C:\Program Files\nodejs\】，也可以根據需要改變目錄，我選擇安裝在D盤：
6、最后一步就是安裝和完成了。如圖：
完成效果：
安裝完成后，在cmd窗口下執行 node -v 命令，看到版本信息，則說明安裝成功：
參考鏈接：https://www.cnblogs.com/zhouyu2017/p/6485265.html
第二步：配置淘寶npm鏡像
由於需要通過npm下載各種模塊，默認npm是從國處服務器下載，對於網絡條件一般的用戶可能很難下載成功，所以需要配置成淘寶的鏡像。
打開命令行，輸入：npm config set registry https://registry.npm.taobao.org
以后下載模塊會自動從淘寶地址進行下載。
第三步：安裝webpack
打開命令行，輸入npm install webpack -g。安裝完成后輸入webpack -v，如果顯示版本號，則說明安裝成功。
第四步：安裝vue-cli
打開命令行，輸入npm install vue-cli -g。安裝完成后輸入vue -V查看版本事情，現在應該是三點幾的版本了，不過我的項目是用的2.9.6版本。
第五步：通過vue-cli初始化項目
打開命令行，進入指定的目錄，輸入vue init webpack 項目名，確認創建項目后，后續還需輸入一下項目名稱、項目描述、作者、打包方式、是否使用ESLint規范代碼等等，詳見上圖。安裝順利執行后會，生成如下文件目錄。
如果不是很習慣ESLint規范代碼，建議新手選擇No，如果你的編輯器安裝了ESLint插件，但你的代碼寫的又不規范，所以會一直報錯，盡管不影響項目的運行，但還是會一直出現討厭的紅色。
前面簡單的介紹了怎么搭建Vue項目以及Node環境，下面切入正題：
先說一下三零九在線葯品銷售系統 前台的項目配置信息，跟上圖所示的其實也差不多吧，只是文件夾下的沒再依次展示了。
|-- build // 項目構建(webpack)相關代碼
| |-- build.js // 生產環境構建代碼
| |-- check-version.js // 檢查node、npm等版本
| |-- 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 // 生產環境變量
|-- src // 源碼目錄
| |-- assets // 圖片樣式文件
| |-- components // vue公共組件
| |-- pages // 頁面 (里面有很多頁面，就不依次詳細展開了)
| |-- router // 路由文件
| |-- store // vuex的狀態管理
| |-- util // 公共js文件
| |-- App.vue // 頁面入口文件
| |-- main.js // 程序入口文件，加載各種公共組件
|-- static // 靜態文件，比如一些圖片，json數據等
|-- .babelrc // ES6語法編譯配置
|-- .editorconfig // 定義代碼格式
|-- .gitignore // git上傳需要忽略的文件格式
|-- README.md // 項目說明
|-- favicon.ico // logo圖標
|-- index.html // 入口頁面
|-- package.json // 項目基本信息
他主要用到的技術有（Vue+Vuex+Vue-router+Axios+Mint-ui+Element-ui+Webpack）等等。
還是先看一下Mobile端的演示效果吧：
只列出了部分功能，像九九包郵，健康資訊，當季必備，關於我們等等沒有列出來。像購物車動畫，同步刷新購物車中商品數量，以及實時刷新個人中心各個訂單狀態的數量。其中彈出框主要是用的Mint-ui中的Message和餓了么組件的MessqgeBox和alert框。
入口文件main.js部分代碼：
其中基於ES6中的Promise的HTTP庫的Axios，關於它的響應攔截請求,以及各種請求方法 請 查看它的官方社區Api中文文檔，地址如下：https://www.kancloud.cn/yunye/axios/234845
再來看一下三零九在線葯品銷售系統 后台的項目配置信息，其實跟前台的目錄結構差不多，畢竟都是用Vue-cli腳手架生成的。
后台管理系統主要用到Vue+Vuex+Vue-router+AxiosElement-ui+Webpack技術等等。
|-- build // 項目構建(webpack)相關代碼
| |-- build.js // 生產環境構建代碼
| |-- check-version.js // 檢查node、npm等版本
| |-- 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 // 生產環境變量
|-- src // 源碼目錄
| |-- assets // 圖片樣式文件
| |-- components // vue公共組件
| |-- pages // 頁面 (里面有很多頁面，就不依次詳細展開了)
| |-- router // 路由文件
| |-- store // vuex的狀態管理
| |-- util // 公共js文件
| |-- App.vue // 頁面入口文件
| |-- main.js // 程序入口文件，加載各種公共組件
|-- static // 靜態文件，比如一些圖片，json數據等
|-- .babelrc // ES6語法編譯配置
|-- .editorconfig // 定義代碼格式
|-- .gitignore // git上傳需要忽略的文件格式
|-- README.md // 項目說明
|-- favicon.ico // logo圖標
|-- index.html // 入口頁面
|-- package.json // 項目基本信息
前后台 都有用到 緩解首屏加載時間過長的一個 過度 頁面（可以這么說吧，其實就是怕一次性加載的數據過大導致白屏時間太長），效果如下：
只是在index.html根頁面下加了如下代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>三零九笙塵葯膳坊后台管理系統</title>
<link rel="shortcut icon" type="image/x-icon" href="static/icon.jfif">
<style>
html,
body,
#app {
height: 100%;
margin: 0px;
padding: 0px;
}
.chromeframe {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
#loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999999;
}
#loader {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border-radius: 50%;
border: 3px solid transparent;
/* COLOR 1 */
border-top-color: #FFF;
-webkit-animation: spin 2s linear infinite;
/* Chrome, Opera 15+, Safari 5+ */
-ms-animation: spin 2s linear infinite;
/* Chrome, Opera 15+, Safari 5+ */
-moz-animation: spin 2s linear infinite;
/* Chrome, Opera 15+, Safari 5+ */
-o-animation: spin 2s linear infinite;
/* Chrome, Opera 15+, Safari 5+ */
animation: spin 2s linear infinite;
/* Chrome, Firefox 16+, IE 10+, Opera */
z-index: 1001;
}
#loader:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
/* COLOR 2 */
border-top-color: #FFF;
-webkit-animation: spin 3s linear infinite;
/* Chrome, Opera 15+, Safari 5+ */
-moz-animation: spin 3s linear infinite;
/* Chrome, Opera 15+, Safari 5+ */
-o-animation: spin 3s linear infinite;
/* Chrome, Opera 15+, Safari 5+ */
-ms-animation: spin 3s linear infinite;
/* Chrome, Opera 15+, Safari 5+ */
animation: spin 3s linear infinite;
/* Chrome, Firefox 16+, IE 10+, Opera */
}
#loader:after {
content: "";
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FFF;
/* COLOR 3 */
-moz-animation: spin 1.5s linear infinite;
/* Chrome, Opera 15+, Safari 5+ */
-o-animation: spin 1.5s linear infinite;
/* Chrome, Opera 15+, Safari 5+ */
-ms-animation: spin 1.5s linear infinite;
/* Chrome, Opera 15+, Safari 5+ */
-webkit-animation: spin 1.5s linear infinite;
/* Chrome, Opera 15+, Safari 5+ */
animation: spin 1.5s linear infinite;
/* Chrome, Firefox 16+, IE 10+, Opera */
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
/* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(0deg);
/* IE 9 */
transform: rotate(0deg);
/* Firefox 16+, IE 10+, Opera */
}
100% {
-webkit-transform: rotate(360deg);
/* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(360deg);
/* IE 9 */
transform: rotate(360deg);
/* Firefox 16+, IE 10+, Opera */
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
/* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(0deg);
/* IE 9 */
transform: rotate(0deg);
/* Firefox 16+, IE 10+, Opera */
}
100% {
-webkit-transform: rotate(360deg);
/* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(360deg);
/* IE 9 */
transform: rotate(360deg);
/* Firefox 16+, IE 10+, Opera */
}
}
#loader-wrapper .loader-section {
position: fixed;
top: 0;
width: 51%;
height: 100%;
background: #7171C6;
/* Old browsers */
z-index: 1000;
-webkit-transform: translateX(0);
/* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: translateX(0);
/* IE 9 */
transform: translateX(0);
/* Firefox 16+, IE 10+, Opera */
}
#loader-wrapper .loader-section.section-left {
left: 0;
}
#loader-wrapper .loader-section.section-right {
right: 0;
}
/* Loaded */
.loaded #loader-wrapper .loader-section.section-left {
-webkit-transform: translateX(-100%);
/* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: translateX(-100%);
/* IE 9 */
transform: translateX(-100%);
/* Firefox 16+, IE 10+, Opera */
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
.loaded #loader-wrapper .loader-section.section-right {
-webkit-transform: translateX(100%);
/* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: translateX(100%);
/* IE 9 */
transform: translateX(100%);
/* Firefox 16+, IE 10+, Opera */
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
.loaded #loader {
opacity: 0;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.loaded #loader-wrapper {
visibility: hidden;
-webkit-transform: translateY(-100%);
/* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: translateY(-100%);
/* IE 9 */
transform: translateY(-100%);
/* Firefox 16+, IE 10+, Opera */
-webkit-transition: all 0.3s 1s ease-out;
transition: all 0.3s 1s ease-out;
}
/* JavaScript Turned Off */
.no-js #loader-wrapper {
display: none;
}
.no-js h1 {
color: #222222;
}
#loader-wrapper .load_title {
font-family: 'Open Sans';
color: #FFF;
font-size: 19px;
width: 100%;
text-align: center;
z-index: 9999999999999;
position: absolute;
top: 60%;
opacity: 1;
line-height: 30px;
}
#loader-wrapper .load_title span {
font-weight: normal;
font-style: italic;
font-size: 13px;
color: #FFF;
opacity: 0.5;
}
</style>
</head>
<body>
<div id="app">
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
<div class="load_title">正在加載 309-admin,請耐心等待
<br>
<span>master-tzy</span>
</div>
</div>
</div>
</body>
</html>
然后看一下后台管理系統的效果圖吧！！！！！！❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤
登錄頁面如下：
運行Mobile端的商城和PC端的管理系統時，前提必須是先打開Node+express的本地服務器（后面會說到），不然會報以下錯誤：
首頁效果如下：
首頁布局其實也是參考了餓了么的Contain布局吧，但又不全是，所以我沒有加動態的Tag標簽頁了，其實也可以實現吧，不過自己用的面包屑也湊合着吧，就懶得換了，當時答辯的前一天晚上，同組的Mr Yang都把代碼發給我了，我也沒來得及去加，因為當時要加的功能真的還有幾個，比如后台沒有考慮周到的大多是沒有對數據進行查詢，還有對訂單沒有進行分頁，以及訂單的按時間查找等等。后來肝到凌晨2點多實在不行了，所以一直沒有將面包屑換掉，所以也湊合着用吧。
在這里再鏈接一個專門用到了餓了么組件中的Tag的動態標簽頁的小例子吧，雖然很簡單，但還是根據自身需要來決定是否要用到Tag標簽頁吧。
鏈接地址 ：https://github.com/tzy13755126023/Vue-elementui-demo-Tag
這里用到了視圖化數據的Echarts中的柱形圖和折線圖來展示數據，關於Echarts怎么使用這里 也不做詳細介紹了吧，直接把官方Api文檔地址放這里了，地址如下： https://www.echartsjs.com/api.html#echarts。請自行查看。
我只貼出關於Echarts組件的部分代碼。
<template>
<div class="ECharts1">
</div>
</template>
<script>
// 引入 ECharts 主模塊
var echarts = require('echarts/lib/echarts');
// 引入柱狀圖
require('echarts/lib/chart/bar');
require("echarts/lib/component/dataset");
// 引入提示框和標題組件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
require("echarts/lib/component/legendScroll");
require("echarts/lib/component/axisPointer");
require("echarts/lib/component/markLine");
export default{
name:'Echarts1',
data(){
return{
}
},
mounted(){
var myChart = echarts.init(document.querySelector('.ECharts1'))
myChart.setOption({
title: {
text: '2018-2019年各類葯物月交易額',
textStyle:{ //文字樣式
color:'#000', //顏色
fontWeight:700, //粗細
fontSize:30,
// textBorderColor:'black', //文字本身的描邊顏色。
textShadowColor:'rgba(255,0,0,.2)', //文字本身的陰影顏色。
// textShadowBlur :5, //文字本身的陰影長度。
// textShadowOffsetX:8, //文字本身的陰影 X 偏移。
// textShadowOffsetY:5, //文字本身的陰影 Y 偏移。
}
},
tooltip : { //提示框組件。
trigger: 'axis', //觸發類型。
// 可選： 'item'數據項圖形觸發，主要在散點圖，餅圖等無類目軸的圖表中使用。
// 'axis' 坐標軸觸發，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用。
axisPointer : { // 坐標軸指示器，坐標軸觸發有效
type : 'shadow' // 默認為直線，可選為：'line' | 'shadow'
}
},
legend: { // 圖例組件
data:['中西葯品','養生保健','醫療器械','計生用品','中葯飲品','美容護膚'],
right:25,
top:70,
// orient:'vertica' 圖例列表的布局朝向。可選：'horizontal' 'vertical'
itemWidth:30, // 圖例的寬度
itemHeight:20, // 圖例的高度
textStyle:{
fontSize:16
}
},
grid: { // 直角坐標系內繪圖網格
top:150,
left: '3%',
right: '4.5%',
bottom: '3%',
containLabel: true
},
xAxis : [ // grid 中的 x 軸
{
type : 'category', //類目軸，適用於離散的類目數據，為該類型時必須通過 data 設置類目數據
data : [
{
value: '2018年11月',
textStyle: {
fontSize: 16,
}
},
{
value: '2018年12月',
textStyle: {
fontSize: 16,
}
},
{
value: '2019年1月',
textStyle: {
fontSize: 16,
}
},
{
value: '2019年2月',
textStyle: {
fontSize: 16,
}
},
{
value: '2019年3月',
textStyle: {
fontSize: 16,
}
},
{
value: '2019年4月',
textStyle: {
fontSize: 16,
}
},
{
value: '2019年5月',
textStyle: {
fontSize: 16,
}
},]
}
],
yAxis : [ // grid 中的 Y 軸
{
name:'單位(千元)',
// category
type : 'value',
nameTextStyle:{
fontSize: 16,
}
},
],
series : [
{
name:'中西葯品',
type:'bar',
data:[260, 332, 301, 334, 390, 330, 320]
},
{
name:'養生保健',
type:'bar',
stack: '廣告',
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'醫療器械',
type:'bar',
stack: '廣告',
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name:'計生用品',
type:'bar',
stack: '廣告',
data:[150, 232, 201, 154, 190, 330, 410],
},
{
name:'中葯飲品',
type:'bar',
data:[862, 1018, 964, 1026, 1679, 1600, 1570],
markLine : {
lineStyle: {
normal: {
type: 'dashed'
}
},
data : [
[{type : 'min'}, {type : 'max'}]
]
}
},
{
name:'美容護膚',
type:'bar',
barWidth : 5,
stack: '中葯飲品',
data:[620, 732, 701, 734, 1090, 1130, 1120],
markLine : {
lineStyle: {
normal: {
type: 'dashed'
}
},
data : [
[{type : 'min'}, {type : 'max'}]
]
}
},
]
});
},
}
</script>
<style scoped>
.ECharts1{
margin:2% 0;
width: 50%;
height: 600px;
float: left;
/*background-color: red;*/
}
</style>
平台用戶管理效果如下：
模糊查詢是當時在老師指出后臨時加的。效果如下：
這里的輸入框中數據發生變化，則會自動更新獲取的數據，每次都會進行分頁，分頁有兩種形式，一種是后台進行分頁再傳到前台，一種是后台傳過來所有的數據交給前台去進行分頁，這里用的是第一種，所以配合餓了么組件的Pagination，當時自己覺得寫得麻煩，pagination中的total總數和分頁加載的數據每次都要請求兩次，所以如果用第二種方法進行分頁的話，則只需請求一次就可以將數據分頁展示出來了。（當時自己也沒考慮這么多吧，后期可能會進行改進。）
查看待審核商家（這里說明一下，因為Mobile端沒有貼申請商家入駐的圖，所以這里的待審核的商家數實際上是用戶提交的申請數）：
查看已審核商家（通過審核的，可以查看當前商家所有上架的商品，以及發布新的商品）：
查看唐志遠大葯房商家的所有上架的商品：
發布新的商品：
查看用戶反饋消息（用戶提交的反饋信息將在這個模塊中展示）：
訂單管理（二級路由，默認跳轉到的是商家代發貨頁面，並展示當前待發貨的數據）：
查看健康資訊文章（點進去可以看到詳細內容）：
發布健康資訊（后台發布的健康資訊，會在Mobile端展示出來，展示給用戶看）：
當季必備：
查看登錄日志：
關於后台管理這塊，權限方面沒有做完，因為預想是后台設計兩個角色，一個管理員身份，另一個則是商家的身份，雖然大同小異，但是實際上獲取的菜單項卻差別很大，商家則只能獲取三個，第一，自身的商家信息管理，第二，該商家的訂單管理，在你家買的東西肯定要你來完成發貨了（如果是代理的話，當然可以不用自己發貨，我們組另外一個同學Ms yong 就是做的跟代理有關的，用戶即代理其實也沒錯，符合當下的這種微商模式），第三就是對自己店內的商品進行管理了。這里只寫了admin管理員的身份，暫時沒有寫商家的身份，后期有時間可能會完善。
最后一個就是服務器項目了，用Node+Express+mysql搭的本地服務器。
Express是Node.js上最流行的Web開發框架，我們可以通過應用生成器工具快速創建一個應用的骨架。
先去了解node下express初始化項目骨架的知識，算了在這里寫一下吧，寫在這里總覺得會好一點（圖片用的CSDN的，我沒有自己在建項目了~~~~~）。
參考鏈接：http://www.expressjs.com.cn/starter/generator.html
$ npm install express-generator -g 全局安裝 express-generator
在當前目錄下創建一個命名為myapp的應用（express 你的項目名）
注意：這里express myapp命令默認會使用jade模板引擎，建議使用ejs模板引擎，則應將命令改為express -e myapp
然后進入到你創建的項目目錄下，安裝所有依賴包
啟動這個應用（Windows平台）
然后在瀏覽器輸入localhost:3000/網址就可以看到這個應用了
通過Express應用生成器創建的應用一般具有如下的目錄結構
解釋：
app.js 啟動文件，入口文件
package.json 存儲工程的信息及模塊依賴，當添加依賴模塊時，運行npm install，npm會檢查當前目錄下的package.json，並自動安裝所有指定的模塊
node_modules 存放package.json中安裝的模塊
public 存放image、css、js文件
routes 存放路由文件
views 存放視圖文件，或者說是模板文件
bin 存放可執行文件
當然本項目中多了兩個Floder，一個是MySQL，其中放了sql腳本，還有mysqlConfig數據庫配置信息等等。
另一個是Api ，其中是關於Client和Admin的 Api接口方法。
服務器項目目錄如下圖所示：
部分Sql腳本如下所示：
309葯膳坊-Mobile商城 項目地址：https://github.com/tzy13755126023/309-Client如果覺得還不錯，請Star一下啦 ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤❤
309葯膳坊-Admin后台管理 項目地址：https://github.com/tzy13755126023/309-Admin如果覺得還不錯，請Star一下啦 ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤❤
309葯膳坊-Server服務器端 項目地址：https://github.com/tzy13755126023/309-server如果覺得還不錯，請Star一下啦 ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤❤ thanks a lot。
Clone到本地后，走下面這個流程吧！！
npm install（npm網速可能比較慢，建議安裝淘寶鏡像cnpm install）
安裝所有的包之后呢，就npm start吧，或者npm run dev 都可以，這個在package.json中的script可以自行設置。但是如果改動了config目錄下的配置文件，比如進行代理跨域，或者改變運行端口，則需要重新啟動項目。
在運行309葯膳坊-Mobile商城 和309葯膳坊-Admin后台管理 之前，記得先打開本地服務器。
❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤
數據庫數據就不放出來了，如果需要數據，聯系方式如下：QQ：2938526863 vx：tzy13755126023。
歡迎Star 歡迎Star 歡迎Star 歡迎Star ❤❤❤❤❤❤❤❤❤❤ ❤❤❤❤❤❤❤❤❤❤ ❤❤❤❤❤❤❤❤❤❤❤❤❤❤
其實當時老師給我的建議是，你太重感情了，從你的項目名字上來看，就可以看出來，其實眼界可以再高點，不要局限於你的寢室。其實，當時我很想反駁他，但是我沒有，也對，四年來確實是室友過於珍貴，可能也和自己參加的活動太少有關吧。現在想想其實也沒那么珍貴吧，因為本就沒有不散的宴席，每個人都是以自己為世界的中心，不強求也不奢求。學習的路還很長，希望自己一直保持這種學習的狀態吧，加油，和看到這篇博文的朋友一起共勉。未來你一定會過得很好！！
歡迎Star 歡迎Star 歡迎Star 歡迎Star ❤❤❤❤❤❤❤ ❤❤❤❤❤❤❤❤❤❤❤❤❤❤ ❤❤❤❤❤❤❤❤❤❤❤❤❤❤