how wonderful the cain design
第一版模板工程
How-Wonderful-the-cain-design เป็นเวอร์ชันอัปเกรดของเทมเพลตแบ็กเอนด์หลังจากเวอร์ชัน v1 โดยยึดตาม vue.js และ element ปัจจุบัน โครงการเทมเพลตรวมการเข้าสู่ ระบบ การตรวจสอบสิทธิ์ การกำหนดค่าเส้นทาง คำขอ ajax การจำลอง แผนภูมิ หน้า 404 หน้า 401 และ หน้าเทมเพลต หลายหน้า แก้ไขปัญหาของบุคลากรฝั่งเซิร์ฟเวอร์ที่กำลังพัฒนาเพจการจัดการแบ็กเอนด์ ต่อไป ฉันจะแนะนำการเตรียมการก่อนใช้โปรเจ็กต์นี้และวิธีการใช้งาน ฉันหวังว่ามันจะช่วยพันธมิตรบางรายที่มีพื้นฐานส่วนหน้าที่อ่อนแอได้~
โปรเจ็กต์นี้อ้างถึง vue-admin-element
หมายเหตุ : โปรเจ็กต์นี้ใช้เวอร์ชัน [email protected]+ และ [email protected]+
หากต้องการติดตั้งโหนด (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 ---------------- 项目帮助文档
ไดเร็กทอรีที่นักพัฒนาจริงต้องให้ความสนใจมากที่สุดเมื่อพัฒนาเพจคือ **/src/views และ / src/router** ไดเร็กทอรีแรกเขียนเพจ และไดเร็กทอรีหลังเขียนข้อมูลเส้นทางของเพจที่เกี่ยวข้อง การกำหนดเส้นทางถูกใช้เป็นฟิลด์การตัดสินสิทธิ์ในเทมเพลต นั่นคืออาร์เรย์สิทธิ์ที่ส่งคืนโดยเซิร์ฟเวอร์จะถูกเปรียบเทียบจริง ๆ กับชื่อ และผลลัพธ์ที่ตรงกันคือเพจสิทธิ์ที่ผู้ใช้เป็นเจ้าของ ไม่เช่นนั้นจะเป็นเพจ 401 หรือ หน้า 404 จะถูกส่งคืน
ขณะนี้โปรเจ็กต์มีผู้ใช้สองคนที่ตั้งค่าไว้: ผู้ดูแลระบบและ ChartUser วัตถุประสงค์หลักคือเพื่อทดสอบการอนุญาต
คุณสามารถเข้าสู่ระบบได้โดยไม่ต้องป้อนรหัสผ่าน แต่คุณต้องป้อนหมายเลขบัญชีของคุณ
步骤一：
将本项目克隆到本地
git clone XXX
步骤二：
安装依赖
npm install
步骤三：
开发及预览
npm run dev
步骤四：
当运行上步控制台报了很多错误时，先运行
npm run lint
会自动帮你解决一些格式化的错误，若还有错误，就得自己找到错误的关键字，到官网中查找该如何修复，后面会介绍步骤
ยกตัวอย่างส่วนประกอบของปุ่ม เมื่อคุณต้องการแนะนำส่วนประกอบของปุ่ม คุณต้องทำตามขั้นตอนต่อไปนี้:
เมื่อพบส่วนประกอบที่เกี่ยวข้องบนเว็บไซต์อย่างเป็นทางการ ให้คัดลอกโค้ดที่เกี่ยวข้อง
<el-button>默认按钮</el-button>
แนะนำส่วนประกอบใน /src/index.js ตามความต้องการ หากคุณไม่ทราบวิธีการแนะนำ คุณสามารถดูคำแนะนำส่วนประกอบทั้งหมดตามความต้องการและค้นหาส่วนประกอบที่เกี่ยวข้องเพื่อนำเข้า
อ่านวิธีใช้ส่วนประกอบนี้อย่างละเอียด เอกสารประกอบของเว็บไซต์อย่างเป็นทางการจะอธิบายอย่างชัดเจนมาก
การเข้าสู่ระบบในโครงการเทมเพลตใช้ mockjs เพื่อจำลองการเข้าสู่ระบบ ขั้นตอนการใช้งานเฉพาะของการเข้าสู่ระบบในเทมเพลตคือ:
สังเกต:
- บัญชีในการตัดสินไม่มีอยู่และจำเป็นต้องแก้ไข มีชื่อผู้ใช้ทั้งหมดสามชื่อในเทมเพลต ซึ่งสอดคล้องกับสิทธิ์ของผู้ใช้สามรายการ เพื่อให้การเขียนง่ายขึ้น ฉันจึงเขียนเช่นนี้ เป็นพรอมต์การส่งคืนของอินเทอร์เฟซหลังจากปรับอินเทอร์เฟซแล้ว
- this.$store.dispatch('Login', ...) คือไวยากรณ์ของ vuex จุดประสงค์คือการเรียกวิธีการเข้าสู่ระบบใน /src/store/modules/user.js เพื่อร้องขออินเทอร์เฟซเซิร์ฟเวอร์และส่งคืนผู้ใช้ที่เกี่ยวข้อง ข้อมูลที่เก็บไว้ในแคชส่วนกลางจะสะดวกสำหรับการโทรทั่วโลก
- โปรดใส่ใจกับรูปแบบของพารามิเตอร์ พารามิเตอร์ในออบเจ็กต์ได้รับการแก้ไขเป็นพารามิเตอร์ และค่าของพารามิเตอร์คือออบเจ็กต์ สามารถวางพารามิเตอร์ต่างๆ ที่อนุญาตโดย axios ไว้ในออบเจ็กต์ได้ เนื่องจากคำขอ get ถูกจำลองที่นี่เท่านั้น จำเป็นต้องใช้พารามิเตอร์ params สำหรับพารามิเตอร์เพิ่มเติม โปรดดูที่การกำหนดค่า axios
เมื่อคุณคลิกเพื่อเข้าสู่ระบบ วิธีการข้างต้นจะถูกเรียก จริงๆ แล้ว เนื้อหาของเมธอดจะเรียกใช้อินเทอร์เฟซ getInfo ใน /scr/api/api.js เพื่อรับข้อมูลผู้ใช้ที่เกี่ยวข้อง ในบรรดาเส้นทางเหล่านี้ ควรใช้เส้นทางพุชทั้งสี่เส้นทาง บุคลากรโดยไม่คำนึงถึงสิทธิ์ เส้นทางที่เข้าถึงได้จะถูกแทรกลงในอาร์เรย์เส้นทางก่อน จากนั้นจึงจะแคชสิทธิ์ ข้อมูลผู้ใช้ และข้อมูลโทเค็น
จากนั้นเรียกอินเทอร์เฟซ getInfo ที่นี่คุณต้องใส่ใจกับ result.code มันถูกตั้งค่าตามรูปแบบของการตั้งค่าอินเทอร์เฟซเซิร์ฟเวอร์ ซึ่งอาจเป็นสถานะ สถานะ หรือรหัส ซึ่งแตกต่างกันไป จากคนสู่คน
โปรดทราบว่าวัตถุ userMap คือผู้ใช้สามคนที่ฉันจำลอง ฟิลด์บทบาทคือฟิลด์การอนุญาต เมื่อเปรียบเทียบกับฟิลด์ชื่อในตารางการกำหนดค่าการกำหนดเส้นทาง เมนูในฟิลด์การอนุญาตคือหน้าฟังก์ชันที่ผู้ใช้มีสิทธิ์
ในการพัฒนาจริง เมื่อแก้ไขอินเทอร์เฟซการเข้าสู่ระบบ ต้องมีฟิลด์บทบาท และรูปแบบจะต้องสอดคล้องกับอาร์เรย์ข้างต้น มิฉะนั้นระบบการอนุญาตจะไม่ถูกต้อง
หลังจากสี่ขั้นตอนข้างต้น กระบวนการเข้าสู่ระบบทั้งหมดจะเสร็จสมบูรณ์
ก่อนที่จะพัฒนาเทมเพลต เราได้เจรจากับเจ้าหน้าที่เซิร์ฟเวอร์เพื่อใช้ jwt สำหรับการตรวจสอบข้อมูลผู้ใช้
ขั้นตอนการประมวลผลคือข้อมูลโทเค็นจะถูกบันทึกไว้ในแคชส่วนกลางเมื่อเข้าสู่ระบบ แต่ละครั้งที่มีการร้องขอข้อมูลอินเทอร์เฟซ เฟรมเวิร์กจะบันทึกข้อมูลโทเค็นในส่วนหัวโดยอัตโนมัติ หากล้มเหลว ข้อมูลจะถูกถ่ายโอนโดยตรงไปยัง หน้าเข้าสู่ระบบและข้อมูลการเข้าสู่ระบบจะถูกออกจากระบบ
นอกจากนี้ยังเป็นอินเทอร์เฟซการเข้าสู่ระบบซึ่ง **commit('SETTOKEN', 'test')** จัดการค่าโทเค็น ในการพัฒนาโครงการจริง การทดสอบนี้ควรแทนที่ด้วยโทเค็นจริงที่ได้รับจากการเข้าสู่ระบบ
เส้นทาง:/src/api/server.js
ให้ความสนใจกับการตัดสิน res.code===301 ที่นี่ หลังจากการเจรจาครั้งก่อนกับเจ้าหน้าที่เซิร์ฟเวอร์ เมื่อโทเค็นหมดอายุ รหัสที่ส่งคืนจะถูกตั้งค่าเป็น 301 เพื่อระบุตัวตน ดังนั้น การตัดสินที่นี่จึงขึ้นอยู่กับการตั้งค่าในโครงการของคุณเอง ซึ่งอาจเป็นรหัส สถานะ สถานะ ฯลฯ .ซึ่งสามารถปรับเปลี่ยนได้ตามโครงการ
เส้นทาง:/src/router/index.js
เมนูและตารางเส้นทางในระบบเทมเพลตแยกจากกันไม่ได้ กล่าวคือ โครงสร้างลำดับชั้นของเมนูและตารางเส้นทางมีความสอดคล้องกัน ดังนั้นจึงต้องเขียนตารางเส้นทางตามกฎ ไม่เช่นนั้น จะส่งผลต่อการแสดงเมนู!
คุณต้องเข้าใจกฎการตั้งค่าก่อน เมนูต้องไม่เกิน 3 ระดับ ดังนั้นจึงมีคำแนะนำสามรูปแบบในตารางการกำหนดค่าเส้นทางด้านล่างนี้
โปรดทราบว่าพารามิเตอร์การกำหนดเส้นทาง 401 ที่ซ่อนอยู่ เมื่อตั้งค่าเป็นจริง หมายความว่าแผนผังเมนูจะกรองเส้นทางนี้ออกและไม่แสดงเส้นทางนั้น
การกำหนดเส้นทางแดชบอร์ดเป็นเมนูระดับแรก รูปแบบการเขียนของเมนูระดับแรกจะมีเพียงเส้นทางเดียวเท่านั้น
ชื่อพารามิเตอร์ในเมตาแสดงถึงชื่อเมนูที่แสดงบนเมนู
icon คือไอคอนเมนู และสิ่งที่อ่านได้คือไอคอนเมนู svg ในไดเร็กทอรี /src/icons/ ดังนั้น เมื่อทำโปรเจ็กต์ของคุณเอง คุณต้องขอให้ศิลปินสร้างไอคอนเมนูในรูปแบบ svg จากนั้นจึงวาง ในไดเร็กทอรีไอคอน ค่าพารามิเตอร์ของไอคอนคือชื่อไฟล์ของไอคอน
สิทธิ์ของเมนูระดับแรกตรงกับชื่อในเมนูย่อย
ข้อแตกต่างเพียงอย่างเดียวระหว่างเมนูระดับที่สองและเมนูระดับแรกคือลูกจะมีค่ามากกว่าหนึ่งรายการ และรายการอื่นๆ จะเหมือนกัน
รูปแบบเมนูระดับที่สามมีรายการย่อยอยู่ในรายการย่อย
การกำหนดค่าตารางเส้นทางต้องได้รับการกำหนดค่าตามคำแนะนำข้างต้น มิฉะนั้นเอฟเฟกต์ที่คุณต้องการจะไม่เป็นไปตามที่คุณต้องการ ให้ความสนใจกับการจับคู่ชื่อและการอนุญาตเมนูเพื่อควบคุมการแสดงเมนู
เส้นทาง:/src/api/api.js
ต้องกำหนดอินเทอร์เฟซทั้งหมดที่ใช้ในเพจในไฟล์นี้เพื่อการจัดการแบบครบวงจรและการแก้ไขที่ง่ายดาย
รูปแบบการเขียนเป็นวิธีการเขียนที่ได้รับจากเทมเพลต
อย่างไรก็ตาม ในการพัฒนาจริง คุณจะพบกับวิธีการส่งพารามิเตอร์หลายวิธี เช่น get, post non-form form, post form form และ rest form ต่อไปนี้เป็นเทมเพลตการเขียนที่สอดคล้องกันสำหรับรูปแบบเหล่านี้
หมายเหตุ: หากคุณต้องการส่งพารามิเตอร์ส่วนหัวของ application/x-www-form-urlenconded พารามิเตอร์ควรเขียนเป็น
const params = { data: {}, headers: { 'content-type': 'application/x-www-form-urlencoded' } }
การส่งแบบฟอร์มโดยพื้นฐานแล้วเหมือนกับการส่งแบบฟอร์ม ข้อแตกต่างคือต้องเปลี่ยนการกำหนดข้อมูลเดิมเป็นการกำหนดพารามิเตอร์
กรอบงานเทมเพลตยังสรุปพารามิเตอร์ส่วนที่เหลืออย่างสม่ำเสมอ และวิธีการถ่ายโอนพารามิเตอร์จะเป็นภาพหน้าจอ
การพัฒนาจริงคือการพัฒนาในเครื่องทั้งหมด ใช้ npm run dev เพื่อเริ่มบริการในเครื่อง
จริงๆ แล้วมันง่ายมาก มันเป็นเพียงการกำหนดค่า
เส้นทาง:/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 โดยตรงในพร็อกซีการกำหนดค่าด้านบน แทรกข้อมูลคุกกี้ลงในข้อมูลส่วนหัว บันทึกและเรียกใช้ 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/rules/no-var คลิกลิงก์นี้เพื่อไปที่เว็บไซต์อย่างเป็นทางการของ eslint ค้นหาสาเหตุของข้อผิดพลาดและแก้ไข รูปแบบที่สอดคล้องกัน
- หากข้อผิดพลาดนี้แก้ไขได้ยากจริงๆ คุณสามารถบล็อกข้อกำหนดนี้ได้ ไปที่ไฟล์ .eslintrc.js ในไดเร็กทอรีรากและเพิ่มการป้องกันกฎที่เกี่ยวข้องให้กับออบเจ็กต์กฎ เช่น กฎ no-var ด้านบน กำหนดค่า "no-var": 0 และกฎนี้จะถูกกรอง
####ปล่อย
npm run build
运行完这个步骤后，会在该目录下生成vue-template文件目录，里面就是打包好的生产代码，放到nginx或者服务端的static目录就可以访问了。
หลังจากบทช่วยสอนข้างต้น ฉันเชื่อว่าคุณไม่เพียงแต่มีความสามารถในการใช้เทมเพลตนี้เท่านั้น แต่ยังได้เข้าสู่โลกแห่งส่วนหน้าอีกด้วย หากเอกสารยังไม่ชัดเจนหรือหากคุณยังต้องการทราบว่าต้องเสริมความรู้ที่เกี่ยวข้องอะไรบ้าง คุณสามารถติดต่อฉันได้ตลอดเวลา~
