how wonderful the cain design
第一版模板工程
how-wonderful-the-cain-design是继v1版本后的一个升级版的后台模板，基于vue.js和element 。目前模板项目中集成了登陆，权限验证，路由配置， ajax请求， mock ，图表， 404页面， 401页面以及若干个模板页面。 حل ألم الموظفين من جانب الخدمة لتطوير صفحة إدارة الخلفية. بعد ذلك ، سأقدم الاستعدادات قبل استخدام المشروع ، وكيفية استخدام المشروع ، وآمل أن أساعد بعض الشركاء مع الأسس الأمامية الضعيفة ~
يشير هذا المشروع إلى عنصر Vue-Admin
注意：本项目中使用[email protected]+版本，以及[email protected]+
لتثبيت Node (8.0+) محليًا ، يمكنك تنزيل إصدار التثبيت مباشرة ومتابعة الخطوات. بعد اكتمال التثبيت ، يكون التحقق ناجحًا.
node -v
npm -v
يظهر رقم الإصدار الناجح
هناك بشكل أساسي النقاط التقنية التالية في المشروع:
لتطوير جانب الخدمة ، يجب فقط ما ورد أعلاه الانتباه إلى قواعد Vue ، مكتبة مكون Element-UI ، كتابة طلب AxiOS ، مواصفات رمز ESLINT ، إذا كنت مفيدًا للمخطط ، فيجب عليك أيضًا الانتباه إلى Echarts .
** توضيح: يتم إجبار المشروع على استخدام ESLINT ، هو تنظيم كتابة الكود. القواعد على الموقع الرسمي. ولكن للصيانة اللاحقة ، فهي مدخلات قيمة. لذلك لا تشعر بالتعلم ، فقط تعتاد على ذلك^-^
// 结构树
|- 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 ---------------- 项目帮助文档
The most important directory that the actual developer development page needs to pay attention to is **/src/views and /src/router ** The former writes the page, the latter writes the routing information of the corresponding page. That is, the يتم مقارنة الصفيف الذي تم إرجاعه بواسطة الخادم بالاسم.
يحتوي المشروع حاليًا على مستخدمين: المسؤول والمخطط. يتم استخدام الغرض الرئيسي لأذونات الاختبار.
يمكنك إدخال كلمة المرور دون تسجيل الدخول ، ولكن يجب إدخال الحساب.
步骤一：
将本项目克隆到本地
git clone XXX
步骤二：
安装依赖
npm install
步骤三：
开发及预览
npm run dev
步骤四：
当运行上步控制台报了很多错误时，先运行
npm run lint
会自动帮你解决一些格式化的错误，若还有错误，就得自己找到错误的关键字，到官网中查找该如何修复，后面会介绍步骤
أخذ مكون الزر كمثال ، عندما يحتاج مكون الزر إلى تقديمه ، يجب أن تكون الخطوات التالية
عندما يوجد المكون المقابل في الموقع الرسمي ، انسخ الرمز المقابل
<el-button>默认按钮</el-button>
يتم تقديم المكون إلى/src/index.js كما هو مطلوب.
قراءة استخدام هذا المكون بعناية ، سيتم تقديم وثيقة الموقع الرسمي بوضوح شديد
تسجيل الدخول في عنصر القالب هو MockJS محاكاة تسجيل الدخول.
يلاحظ:
- رقم الحساب إذا لم يكن هناك حاجة إلى تعديل الحساب. يجب أن يكون موجه الإرجاع للواجهة بعد الوصل.
- هذا. للمكالمات العالمية.
- الانتباه إلى تنسيق المعلمة. محاكاة هنا.
عند النقر لتسجيل الدخول ، ستتصل بالطريقة أعلاه. إدراج في صفيف التوجيه ، ثم ذاكرة التخزين المؤقت أذونات ومعلومات المستخدم ومعلومات الرمز المميز.
ثم يتم استخدام واجهة GetInfo. تختلف من شخص لآخر.
لاحظ أن كائن USERMAP هو المستخدمين الثلاثة التي قمت بمحاكاةها.
في التطوير الفعلي ، عند تعديل واجهة تسجيل الدخول ، يجب أن يكون حقل الدور متاحًا ، ويجب أن يكون التنسيق متسقًا مع الصفيف أعلاه ، وإلا فإن نظام الأذونات سيكون غير صالح
بعد الخطوات الأربع المذكورة أعلاه ، يتم الانتهاء من عملية التشغيل بأكملها لتسجيل الدخول
قبل تطوير القالب ، تفاوض موظفو جانب الخدمة على شهادة معلومات المستخدم.
تتمثل عملية المعالجة في حفظ معلومات الرمز المميز في ذاكرة التخزين المؤقت العالمية عند تسجيل الدخول. ستقوم كل بيانات واجهة طلب تلقائيًا بحفظ معلومات الرمز المميز في الرأس.
إنه أيضًا واجهة تسجيل الدخول.
المسار: /src/api/Server.js
لاحظ الحكم Res.Code === 301 هنا. قبل التفاوض مع الموظفين من جانب الخدمة ، عندما ينتهي الرمز المميز ، سيتم تعيين الرمز الذي تم إرجاعه إلى 301 كشعار. وما إلى ذلك ، وفقًا لتعديل المشروع.
المسار: /src/router/index.js
模板系统中的菜单和路由表是密不可分的，换句话说，菜单的层级结构和路由表是一致的。 لذلك ، يجب كتابة جدول التوجيه وفقًا للقواعد ، وإلا فإنه سيؤثر على عرض القائمة!
先要明白设定的规则，菜单不能超过三级，因此路由配置表中的格式就存在三种格式，以下分别介绍
ملاحظة 401 معلمة الطريق مخفية.
توجيه لوحة القيادة هو أول قائمة من الفصول الدراسية.
تمثل المعلمة في META اسم القائمة المعروض في القائمة
Icon هو رمز قائمة ، اقرأ أيقونة قائمة SVG في/SRC/الرموز/الدليل.
تتطابق أذونات القائمة الأولى ذات المستوى مع الاسم في الأطفال
الفرق الوحيد بين القائمة الثانية والمستوى الأول هو أن الأطفال أكبر من واحد ، وغيرهم.
ثلاثة تنسيقات قائمة على مستوى الأطفال في الأطفال
يجب تكوين تكوين جدول المسار وفقًا للتعليمات المذكورة أعلاه ، وإلا فلن يكون التأثير هو ما تريد. بالإضافة إلى ذلك ، انتبه إلى إقران أذونات الاسم والقائمة للتحكم في القائمة.
المسار: /src/api/API.JS
يجب تعريف جميع الواجهات المستخدمة في الصفحة في هذا الملف ، والغرض من ذلك هو الإدارة الموحدة ، والتي هي مريحة للتعديل
تنسيق الكتابة لطريقة الكتابة التي يوفرها القالب.
ومع ذلك ، في التطوير الفعلي ، سيكون هناك مجموعة متنوعة من طرق معلمات الإرسال ، مثل الحصول على النماذج غير المقبولة ، ونشر أشكال النماذج ، وأشكال الراحة. ما يلي هو قالب الكتابة المقابل.
ملاحظة: إذا كنت بحاجة إلى تمرير معلمات الرأس للتطبيق/x-www-form-urlenconded ، فيجب كتابة المعلمات باسم
const params = { data: {}, headers: { 'content-type': 'application/x-www-form-urlencoded' } }
التقديم غير الإسلام هو نفس النموذج لتقديم النموذج.
يتم أيضًا تغليف إطار القالب بشكل موحد لمعلمة REST.
التطوير الفعلي هو تطوير هذا الجهاز.
في الواقع ، الأمر بسيط للغاية ، مجرد تكوين
المسار: /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': ''
}
}
}
يمكن للمطورين تكوين الوكيل بأنفسهم حسب الحاجة
إذا كان لنظام الخلفية آلية الشهادات الخاصة به ، مثل JWT. يمكنك النظر في شهادة معلومات ملفات تعريف الارتباط.
إذا كنت ترغب في أخذ ملفات تعريف الارتباط ، فأضف تكوين onproxyreq مباشرة في وكيل التكوين أعلاه ، قم بتوصيل معلومات ملفات تعريف الارتباط في معلومات الرأس ، احفظ RE -NPM RUN DEV
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();
// 调用这个方法后，表格就能展现了
عند الانتهاء من الرمز ، أعتقد أنه قد تم الانتهاء منه ، لذلك أريد نشره. وقد وجد أنه تم رفض المؤتمر الصحفي ، لأنه عندما كانت مشكلة التنسيق موجودة في الكود ، لم يُسمح بتقديمه إلى الخادم.
كيف تحل مشكلة تنسيق الكود؟
استخدم NPM Run Lint أولاً. بغض النظر عن الثلاثة السبعة والعشرين ، يقوم أولاً بتنفيذ هذا ، فسيؤدي ذلك بسرعة إلى القضاء على الكثير من المشكلات في التنسيق
إذا كانت هناك العديد من المشاكل ، فيجب حلها واحدًا تلو الآخر. الحل كما يلي
- يوجد رابط في موجه الخطأ ، مثل http: //eslint.ort/docs/roules/no-dar ، انقر على هذا الرابط إلى الموقع الرسمي لـ ESLINT لمعرفة سبب الخطأ وتعديله إلى التنسيق المقابل.
- إذا كان من الصعب تعديل هذا الخطأ حقًا ، فيمكن حماية هذه المواصفات. في ملف.
####يطلق
npm run build
运行完这个步骤后，会在该目录下生成vue-template文件目录，里面就是打包好的生产代码，放到nginx或者服务端的static目录就可以访问了。
بعد البرنامج التعليمي أعلاه ، أعتقد أنك لم تملك فقط القدرة على استخدام هذا القالب ، ولكن أيضًا دخلت عالم الأمامي. إذا كانت الوثيقة لا تزال غير واضحة ، أو كنت تريد معرفة المعرفة ذات الصلة التي يجب إضافتها ، فيمكنك الاتصال بي في أي وقت ~
