how wonderful the cain design
第一版模板工程
how-wonderful-the-cain-design ist eine aktualisierte Version der Backend-Vorlage nach der Version v1, basierend auf vue.js und element . Derzeit integriert das Vorlagenprojekt Anmeldung , Berechtigungsüberprüfung , Routing-Konfiguration , Ajax-Anfrage , Mock , Diagramme , 404-Seite , 401-Seite und mehrere Vorlagenseiten . Lösen Sie die Probleme, bei denen serverseitiges Personal Back-End-Verwaltungsseiten entwickelt. Als nächstes werde ich die Vorbereitungen vor der Verwendung dieses Projekts und seine Verwendung vorstellen. Ich hoffe, dass es einigen Partnern mit schwachem Front-End-Fundament helfen kann
Dieses Projekt bezieht sich auf vue-admin-element
Hinweis : Dieses Projekt verwendet die Versionen [email protected]+ und [email protected]+
Um Node (8.0+) lokal zu installieren, können Sie die Installationsversion direkt herunterladen und den Schritten folgen. Überprüfen Sie nach Abschluss der Installation, ob die Installation erfolgreich war.
node -v
npm -v
Der Erfolg liegt vor, wenn die Versionsnummer angezeigt wird
Das Projekt umfasst im Wesentlichen folgende technische Punkte:
Bei der serverseitigen Entwicklung müssen Sie nur auf die Vue-Syntax, die Element-UI-Komponentenbibliothek, die Axios-Anforderungsschreibmethode und die Eslint-Codespezifikationen achten. Wenn Diagramme nützlich sind, sollten Sie auch auf Echarts achten.
**Wichtiger Hinweis:** Die Verwendung von eslint ist im Projekt obligatorisch, um das Schreiben von Code zu standardisieren. Wenn Sie zum ersten Mal damit in Berührung kommen, müssen Sie auf die offizielle Website gehen, um herauszufinden, welche Probleme es gibt sind in der Grammatik und wie man sie ändert. Aber für die spätere Wartung ist es eine äußerst wertvolle Investition. Denken Sie also nicht, dass es umständlich ist, sondern gewöhnen Sie sich einfach daran ^-^
// 结构树
|- build/ ------------------- 组件webpack区
|- config/ ------------------ 组件启动配置区，开发人员可在index.js中配置动态代理（当运行npm run dev时，该动态代理会生效，即可调用服务端接口），也可以修改端口号，防止端口号冲突
|- src/ --------------------- 组件源代码
|- api/ ----------------- 接口编码区
|- assets/ -------------- 图片区
|- components/ ---------- 组件编码区
|- icons/ --------------- 菜单icon svg图标区
|- mock/ ---------------- 模拟接口区
|- permission/ ---------- 路由权限编码区(可以不用修改)
|- router/ --------------- 配置路由区，开发完成的页面都要在这里挂路由，才能展现
|- store/ --------------- 全局缓存注入区，目前登陆的入口从这进入，会缓存用户信息，token信息以及权限信息
|- styles/ -------------- 公共样式区
|- utils/ ---------------- 工具区，开发人员开发的工具集都放在该目录中
|- views/ ---------------- 页面开发区，开发人员开发的页面放在该目录中
|- App.vue --------------- 启动的vue文件
|- index.js -------------- 启动js文件，element-ui是按需加载的，开发人员要根据引用了哪些element组件在该js文件中引入，引入格式参照模板
|- static/ ------------------ static放置一些静态文件，和assets的区别：assets会被编译替换名字，static中的不会被编译，原汁原味
|- .babelrc ----------------- babel 配置文件
|- .eslintignore ------------ eslint ignore配置文件
|- .eslintrc.js ------------- eslint配置文件
|- .gitignore --------------- git忽略提交文件配置
|- .postcssrc.js ------------ postcss配置文件
|- index.html --------------- HTML 模板
|- package-lock.json -------- npm 版本锁定文件，每添加一个依赖都会变化这个，保证对依赖版本的控制
|- package.json ------------- npm 配置文件
|- README.md ---------------- 项目帮助文档
Die Verzeichnisse , auf die tatsächliche Entwickler beim Entwickeln von Seiten achten müssen, sind **/src/views und /src/router**. Ersteres schreibt die Seite und letzteres schreibt die Routing-Informationen der entsprechenden Seite Das Routing wird als Berechtigungsbeurteilungsfeld in der Vorlage verwendet. Das heißt, das vom Server zurückgegebene Berechtigungsarray wird tatsächlich mit dem Namen verglichen, und das übereinstimmende Ergebnis ist die Berechtigungsseite, die dem Benutzer gehört, andernfalls eine 401-Seite Es wird eine 404-Seite zurückgegeben.
Für das Projekt sind derzeit zwei Benutzer eingerichtet: admin und ChartUser. Der Hauptzweck besteht darin, Berechtigungen zu testen.
Sie können sich ohne Eingabe eines Passworts anmelden, müssen jedoch Ihre Kontonummer eingeben.
步骤一：
将本项目克隆到本地
git clone XXX
步骤二：
安装依赖
npm install
步骤三：
开发及预览
npm run dev
步骤四：
当运行上步控制台报了很多错误时，先运行
npm run lint
会自动帮你解决一些格式化的错误，若还有错误，就得自己找到错误的关键字，到官网中查找该如何修复，后面会介绍步骤
Am Beispiel der Schaltflächenkomponente müssen Sie beim Einführen der Schaltflächenkomponente die folgenden Schritte ausführen:
Wenn Sie die entsprechende Komponente auf der offiziellen Website finden, kopieren Sie den entsprechenden Code
<el-button>默认按钮</el-button>
Führen Sie die Komponente bei Bedarf in /src/index.js ein. Wenn Sie nicht wissen, wie Sie sie einführen sollen, können Sie die entsprechende Komponente zum Importieren in der On-Demand-Einführung aller Komponenten finden.
Lesen Sie sorgfältig, wie Sie diese Komponente verwenden. Die offizielle Website-Dokumentation wird es sehr deutlich erklären.
Die Anmeldung im Vorlagenprojekt verwendet Mockjs, um die Anmeldung zu simulieren. Die spezifischen Implementierungsschritte der Anmeldung in der Vorlage sind:
Beachten:
- Das Konto im if-Urteil existiert nicht und muss geändert werden. Es gibt insgesamt drei Benutzernamen, die den drei Benutzerberechtigungen entsprechen. Um das Schreiben zu vereinfachen, sollte es so sein Seien Sie die Rückgabeaufforderung der Schnittstelle nach dem Anpassen der Schnittstelle.
- this.$store.dispatch('Login', ...) ist die Syntax von vuex. Der Zweck besteht darin, die Login-Methode in /src/store/modules/user.js aufzurufen, um die Serverschnittstelle anzufordern und den entsprechenden Benutzer zurückzugeben Die im globalen Cache gespeicherten Daten sind praktisch für globale Anrufe.
- Achten Sie auf das Format der Parameter. Die Parameter im Objekt sind auf Parameter festgelegt, und der Wert von Parametern ist, dass verschiedene von Axios zugelassene Parameter im Objekt platziert werden können, da hier nur die Get-Anfrage simuliert wird Der Parameter params wird benötigt. Weitere Parameter finden Sie unter axios config
Wenn Sie zum Anmelden klicken, wird die obige Methode aufgerufen. Der Methodenkörper ruft tatsächlich die getInfo-Schnittstelle in /scr/api/api.js auf, um die entsprechenden Benutzerdaten abzurufen Zugängliche Routen werden zunächst in das Routen-Array eingefügt, und dann werden Berechtigungen, Benutzerinformationen und Token-Informationen zwischengespeichert.
Dann wird die getInfo-Schnittstelle verwendet. Hier müssen Sie auf result.code achten. Es kann sich um Status, Status oder Code handeln von Mensch zu Mensch.
Beachten Sie, dass es sich bei dem userMap-Objekt um die drei von mir simulierten Benutzer handelt. Im Vergleich zum Namensfeld in der Routing-Konfigurationstabelle ist das Menü im Berechtigungsfeld die Funktionsseite, für die der Benutzer Berechtigungen hat.
In der tatsächlichen Entwicklung muss beim Ändern der Anmeldeschnittstelle das Rollenfeld vorhanden sein und das Format muss mit dem obigen Array übereinstimmen, andernfalls ist das Berechtigungssystem ungültig.
Nach den oben genannten vier Schritten ist der gesamte Anmeldevorgang abgeschlossen.
Vor der Entwicklung der Vorlage haben wir mit dem Serverpersonal ausgehandelt, JWT für die Authentifizierung der Benutzerinformationen zu verwenden.
Der Verarbeitungsablauf besteht darin, dass die Token-Informationen beim Anmelden im globalen Cache gespeichert werden. Bei jeder Anforderung der Schnittstellendaten speichert das Framework die Token-Informationen automatisch im Header. Wenn dies fehlschlägt, werden sie direkt an übertragen Anmeldeseite und die Anmeldeinformationen werden abgemeldet.
Es ist auch die Anmeldeschnittstelle, in der **commit('SETTOKEN', 'test')** den Tokenwert verarbeitet. In der tatsächlichen Projektentwicklung sollte dieser Test durch den echten Token ersetzt werden, der durch die Anmeldung erhalten wird.
Pfad:/src/api/server.js
Beachten Sie hier das Urteil res.code===301. Nach vorheriger Verhandlung mit dem Serverpersonal wird der zurückgegebene Code zur Identifizierung auf 301 gesetzt. Daher basiert die Beurteilung hier auch auf den Einstellungen in Ihrem eigenen Projekt, bei denen es sich um Code, Status, Status usw. handeln kann ., die je nach Projekt geändert werden können.
Pfad:/src/router/index.js
Das Menü und die Routing-Tabelle im Vorlagensystem sind untrennbar miteinander verbunden. Mit anderen Worten, die hierarchische Struktur des Menüs und der Routing-Tabelle sind konsistent . Daher muss die Routing-Tabelle gemäß den Regeln geschrieben werden, da sie sonst die Anzeige des Menüs beeinträchtigt!
Sie müssen zunächst die Einstellungsregeln verstehen. Das Menü darf nicht mehr als drei Ebenen umfassen . Daher gibt es in der Routing-Konfigurationstabelle drei Formate.
Beachten Sie, dass der ausgeblendete 401-Routing-Parameter, wenn er auf „true“ gesetzt ist, bedeutet, dass der Menübaum diese Route herausfiltert und nicht anzeigt.
Das Dashboard-Routing ist ein Menü der ersten Ebene. Das Schreibformat des Menüs der ersten Ebene ist wie oben. Es gibt nur eine Route bei Kindern.
Der Parametertitel in Meta stellt den im Menü angezeigten Menünamen dar
Das Symbol ist das Menüsymbol, und was gelesen wird, ist das SVG-Menüsymbol im Verzeichnis /src/icons/. Wenn Sie also Ihr eigenes Projekt erstellen, müssen Sie den Künstler bitten, das Menüsymbol im SVG-Format zu erstellen und dann zu platzieren es im Icons-Verzeichnis. Der Parameterwert von icon ist der Dateiname der Icons
Die Berechtigungen des Menüs der ersten Ebene stimmen mit dem Namen in untergeordneten Elementen überein.
Der einzige Unterschied zwischen dem Menü der zweiten Ebene und dem Menü der ersten Ebene besteht darin, dass die Kinder größer als eins sind und die anderen gleich sind.
Das Menüformat der dritten Ebene hat Kinder innerhalb von Kindern.
Die Konfiguration der Routing-Tabelle muss gemäß den obigen Anweisungen konfiguriert werden, andernfalls ist der gewünschte Effekt nicht der gewünschte. Achten Sie auch auf die Paarung von Name und Menüberechtigungen, um die Menüanzeige zu steuern.
Pfad:/src/api/api.js
Alle auf der Seite verwendeten Schnittstellen müssen in dieser Datei definiert werden, um eine einheitliche Verwaltung und einfache Änderung zu ermöglichen.
Das Schreibformat ist die von der Vorlage bereitgestellte Schreibmethode.
In der tatsächlichen Entwicklung werden Sie jedoch auf mehrere Möglichkeiten zum Übertragen von Parametern stoßen, z. B. Get, Post-Non-Form-Formular, Post-Formular-Formular und Rest-Formular. Im Folgenden finden Sie entsprechende Schreibvorlagen für diese Formate.
Hinweis: Wenn Sie den Header-Parameter von application/x-www-form-urlenconded übergeben müssen, sollte der Parameter als geschrieben werden
const params = { data: {}, headers: { 'content-type': 'application/x-www-form-urlencoded' } }
Die Übermittlung ohne Formular ist grundsätzlich dasselbe wie die Übermittlung per Formular. Der Unterschied besteht darin, dass die ursprüngliche Zuweisung zu Daten in die Zuweisung zu Parametern geändert werden muss.
Das Vorlagen-Framework kapselt auch die restlichen Parameter einheitlich, und die Parameterübertragungsmethode ist ein Screenshot.
Die eigentliche Entwicklung erfolgt ausschließlich lokal. Verwenden Sie npm run dev, um den Dienst lokal zu starten. Dann stellt sich die Frage, wie man damit umgeht, wenn eine Schnittstelle angefordert wird.
Es ist eigentlich ganz einfach, es ist nur eine Konfiguration
Pfad:/config/index.js
proxyTable: {
'/cloudfs': {
target: 'http://your_ip_address',
changeOrigin: true,
pathRewrite: {
'^/cloudfs': '/cloudfs'
}
},
'/api': {
target: 'http://your_ip_address',
changeOrigin: true,
pathRewrite: {
'^/api': '/api'
}
},
'/plustek': {
target: 'http://your_ip_address/plustek',
changeOrigin: true,
onProxyReq: function (proxyReq, req, res) {
console.log('获取到', process.env.eimCookie)
proxyReq.setHeader('Cookie', process.env.eimCookie) // 配置cookie方式
},
pathRewrite: {
'^/plustek': ''
}
}
}
Entwickler können den Proxy nach Bedarf selbst konfigurieren
Wenn das Backend-System über einen eigenen Authentifizierungsmechanismus verfügt, z. B. JWT. Dann besteht keine Notwendigkeit, die Authentifizierung der Cookie-Informationen in Betracht zu ziehen.
Wenn Sie Cookies verwenden möchten, fügen Sie die onProxyReq-Konfiguration direkt im Konfigurations-Proxy oben hinzu, fügen Sie die Cookie-Informationen in die Header-Informationen ein, speichern Sie sie und führen Sie npm run dev erneut aus.
import chartMaker from '@/components/charts/chartMaker';
components: {
chartMaker,
},
<chart-maker id="chart-small1" height="120px" width="100%" :option.sync="chartOption" :forceRefresh.sync="forceRefreshChart"></chart-maker>
id---不能重复
height---固定高度
width---宽度使用百分比，才能支持自适应，容器宽度由外层容器控制。
option---echarts参数，模板中已经集成了较为常用的图形使用
forceRefresh---强制刷新组件，传入为true时才会强制刷新
getChart1Option() {
const tmpOption = {};
tmpOption.title = {
text: '访问量',
left: '5',
top: '10',
};
tmpOption.tooltip = {
axisPointer: {
lineStyle: {
color: '#57617B',
},
},
position(point, params, dom, rect, size) {
if (point[0] < 30) {
return [0, '50%'];
} else if (point[0] > (size.viewSize[0] - 80)) {
return [size.viewSize[0] - 80, '50%'];
}
return [point[0] - 30, '50%'];
},
formatter: '{b}月: {c}',
};
tmpOption.grid = {
top: 55,
left: '-8%',
right: '5%',
bottom: '2%',
containLabel: true,
};
tmpOption.xAxis = [{
show: false,
type: 'category',
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: '#475669',
},
},
splitLine: {
show: true,
lineStyle: {
color: ['#E3E9EF'],
},
},
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
}];
tmpOption.yAxis = [{
show: false,
type: 'value',
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: '#475669',
},
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 14,
},
},
splitLine: {
lineStyle: {
color: ['#E3E9EF'],
},
},
}];
tmpOption.series = [{
name: '日访问量',
type: 'line',
smooth: true,
// symbol: 'circle',
symbolSize: 6,
showSymbol: true,
lineStyle: {
normal: {
width: 2,
},
},
itemStyle: {
normal: {
color: '#0086E6',
borderColor: '#0086E6',
borderWidth: 2,
},
},
data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122],
}];
this.chartOption = Object.assign({}, this.option, tmpOption);
},
注意：模板中使用的属性设置方法，用的是Object.assign，用方法中的tmpOption属性强制覆盖默认的option属性，传入到组件
this.getChart1Option();
// 调用这个方法后，表格就能展现了
Wenn Sie mit dem Schreiben des Codes fertig sind, denken Sie glücklich, dass er fertig ist und möchten ihn veröffentlichen. Es stellte sich heraus, dass die Pressekonferenz abgelehnt wurde, da der Code bei Formatierungsproblemen nicht an den Server übermittelt werden darf.
Wie kann das Codeformatproblem gelöst werden?
Verwenden Sie zuerst npm run lint. Egal was passiert, wenn Sie dies zuerst ausführen, werden Sie viele Formatierungsprobleme schnell beseitigen.
Wenn Sie feststellen, dass es noch viele Probleme gibt, müssen Sie diese einzeln lösen. Die Lösung ist wie folgt
- Die Fehlermeldung enthält einen Link, z. B. http://eslint.ort/docs/rules/no-var. Klicken Sie auf diesen Link, um zur offiziellen Eslint-Website zu gelangen, die Fehlerursache herauszufinden und sie zu ändern das entsprechende Format.
- Wenn dieser Fehler tatsächlich schwer zu beheben ist, können Sie diese Angabe blockieren. Gehen Sie zur Datei .eslintrc.js im Stammverzeichnis und fügen Sie die entsprechende Regelabschirmung zum Regelobjekt hinzu, z. B. die No-Var-Regel oben. Konfigurieren Sie „no-var“: 0 und diese Regel wird gefiltert.
####freigeben
npm run build
运行完这个步骤后，会在该目录下生成vue-template文件目录，里面就是打包好的生产代码，放到nginx或者服务端的static目录就可以访问了。
Nach dem obigen Tutorial glaube ich, dass Sie nicht nur die Möglichkeit haben, diese Vorlage zu verwenden, sondern auch in die Front-End-Welt eingestiegen sind. Sollte das Dokument noch unklar sein, oder Sie möchten noch wissen, welches relevante Wissen ergänzt werden muss, können Sie mich jederzeit kontaktieren~
