how wonderful the cain design
第一版模板工程
How-Wonderful-the-Cain-conception est une version mise à niveau du modèle d'arrière-plan après la version V1, basée sur vue.js et element . À l'heure actuelle, les éléments de modèle sont intégrés , la vérification d'autorité , la configuration de routage , la demande Ajax , la simulation , les graphiques , 404 pages , les pages 401 et plusieurs pages de modèle . Résolvez la douleur du personnel côté service pour développer la page de gestion des antécédents. Ensuite, je présenterai les préparatifs avant d'utiliser le projet, et comment utiliser le projet, j'espère aider certains partenaires avec des fondations frontales faibles ~
Ce projet fait référence à Vue-Admin-Element
Remarque : élé[email protected]+ dans cet élément, et [email protected]+
Pour installer le nœud (8.0+) localement, vous pouvez télécharger directement la version d'installation et suivre les étapes. Une fois l'installation terminée, la vérification est réussie.
node -v
npm -v
Le numéro de version réussie apparaît
Il y a principalement les points techniques suivants dans le projet:
Pour le développement côté service, ce qui précède n'a besoin que de prêter attention à la grammaire Vue, la bibliothèque des composants Element-UI, la rédaction de la demande d'Axios, la spécification du code Eslint, si vous êtes utile au graphique, vous devez également prêter attention aux Echarts .
** Explication: ** Le projet est obligé d'utiliser Eslint, le but est de réglementer la rédaction du code. La grammaire sur le site officiel. Mais pour une maintenance ultérieure, c'est une entrée précieuse. Alors ne vous sentez pas encombrant, s'habituez-vous à cela ^ - ^
// 结构树
|- 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 ---------------- 项目帮助文档
Le répertoire le plus important à laquelle la page de développement du développeur doit faire attention est ** / src / vues et / src / routeur ** Le premier écrit la page, le second écrit les informations de routage de la page correspondante. Le tableau renvoyé par le serveur est en fait comparé au nom.
Le projet compte actuellement deux utilisateurs: l'administrateur et le cartulotateur. L'objectif principal est utilisé pour les autorisations de test.
Vous pouvez saisir le mot de passe sans vous connecter, mais vous devez saisir le compte.
步骤一：
将本项目克隆到本地
git clone XXX
步骤二：
安装依赖
npm install
步骤三：
开发及预览
npm run dev
步骤四：
当运行上步控制台报了很多错误时，先运行
npm run lint
会自动帮你解决一些格式化的错误，若还有错误，就得自己找到错误的关键字，到官网中查找该如何修复，后面会介绍步骤
Prenant le composant du bouton comme exemple, lorsque le composant bouton doit être introduit, les étapes suivantes doivent être
Lorsque le composant correspondant est trouvé sur le site officiel, copiez le code correspondant
<el-button>默认按钮</el-button>
Le composant est introduit sur / src / index.js au besoin.
Lire attentivement l'utilisation de ce composant, le document officiel du site Web sera introduit très clairement
La connexion dans l'élément de modèle est la connexion simulée MockJS.
Avis:
- Le numéro de compte dans If n'a pas la nécessité de modifier le compte. Il doit s'agir de l'invite de retour de l'interface après la jonction.
- Ce. pour les appels mondiaux.
- Faites attention au format du paramètre. simulé ici.
Lorsque vous cliquez pour vous connecter, vous appelez la méthode ci-dessus. inséré dans le tableau de routage, puis cache les autorisations, les informations de l'utilisateur et les informations de jeton.
Ensuite, l'interface GetInfo. varier d'une personne à l'autre.
Notez que l'objet UserMap est les trois utilisateurs que j'ai simulés.
En développement réel, lors de la modification de l'interface de connexion, le champ de rôle doit être disponible et le format doit être cohérent avec le tableau ci-dessus, sinon le système d'autorisations sera invalide
Après les quatre étapes ci-dessus, l'ensemble du processus de fonctionnement de la connexion est terminé
Avant de développer le modèle, le personnel côté service a négocié la certification des informations utilisateur.
Le processus de traitement consiste à enregistrer les informations de jeton dans le cache global lors de la connexion. Chaque données d'interface de demande enregistrera automatiquement les informations de jeton dans l'en-tête.
Il s'agit également de l'interface de connexion.
Chemin: /src/api/server.js
Notez le jugement res.code === 301 ici. Avant de négocier le personnel côté service, lorsque le jeton expire, le code retourné sera défini sur 301 en tant que logo. etc., selon la modification du projet.
Chemin: /src/router/index.js
Le menu et la table de routage dans le système de modèle sont inséparables . Par conséquent, la table de routage doit être écrite conformément aux règles, sinon elle affectera l'affichage du menu!
Tout d' abord , vous devez comprendre les règles de réglage.
Remarque 401 Paramètre de route caché.
Le routage du tableau de bord est un menu de la première classe.
Le paramètre dans Meta représente le nom de menu affiché dans le menu
L'icône est une icône de menu, lisez l'icône du menu SVG dans / src / icônes / répertoire.
Les autorisations du menu de premier niveau correspondent au nom des enfants
La seule différence entre le menu du deuxième niveau et le premier menu est que les enfants sont supérieurs à un et autres.
Les formats de menu à trois niveaux ont des enfants chez les enfants
La configuration de la table d'itinéraire doit être configurée en fonction des instructions ci-dessus, sinon l'effet ne sera pas ce que vous voulez. De plus, faites attention à l'appariement du nom et des autorisations de menu pour contrôler le menu.
Chemin: /src/api/api.js
Toutes les interfaces utilisées dans la page doivent être définies dans ce fichier, l'objectif est d'une gestion uniforme, qui est pratique à modifier
Format d'écriture pour la méthode d'écriture fournie par le modèle.
Cependant, dans le développement réel, il y aura une variété de façons de paramètres de transmission, telles que GET, des formulaires non tables, des formulaires post-formulaires, des formulaires de repos. Ce qui suit est un modèle d'écriture correspondant.
Remarque: Si vous devez transmettre les paramètres de la tête de l'application / x-www-form-urlenCondé, les paramètres doivent être écrits comme
const params = { data: {}, headers: { 'content-type': 'application/x-www-form-urlencoded' } }
La soumission non formelle est fondamentalement la même que la soumission du formulaire du formulaire.
Le cadre du modèle est également uniformément encapsulé au paramètre de repos.
Le développement réel est le développement de cette machine.
En fait, c'est très simple, juste une configuration
Chemin: /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': ''
}
}
}
Les développeurs peuvent configurer l'agent par eux-mêmes au besoin
Si le système d'arrière-plan a son propre mécanisme de certification, comme JWT. Vous pouvez considérer la certification des informations sur les cookies.
Si vous souhaitez prendre des cookies, ajoutez la configuration d'Onproxyreq directement dans l'agent de configuration ci-dessus, branchez les informations sur les cookies dans les informations de l'en-tête, enregistrez le dev-npm
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();
// 调用这个方法后，表格就能展现了
Lorsque vous avez terminé le code, je pense qu'il a été terminé, donc je veux le publier. Il a été constaté que la conférence de presse a été rejetée, car lorsque le problème du format existait dans le code, il n'a pas été autorisé à être soumis au serveur.
Comment résoudre le problème du format de code?
Utilisez d'abord NPM Run Lint. Quels que soient les trois sept vingt-un, l'exécuter d'abord, il éliminera rapidement beaucoup de problèmes dans le format
S'il y a encore de nombreux problèmes, il doit être résolu un par un. La solution est la suivante
- Il y a un lien dans l'invite d'erreur, comme http: //eslint.ort/docs/rules/no-dar, cliquez sur ce lien vers le site officiel d'Eslint pour découvrir la raison de l'erreur et la modifier vers le format correspondant.
- Si cette erreur est vraiment difficile à modifier, cette spécification peut être blindée. Dans le fichier.
####libérer
npm run build
运行完这个步骤后，会在该目录下生成vue-template文件目录，里面就是打包好的生产代码，放到nginx或者服务端的static目录就可以访问了。
Après le tutoriel ci-dessus, je crois que vous avez non seulement possédé la possibilité d'utiliser ce modèle, mais aussi entré dans le monde avant. Si le document n'est pas encore clair ou si vous souhaitez savoir quelles connaissances connexes doivent être ajoutées, vous pouvez me contacter à tout moment ~
