一、一個(gè)后端程序員為什么要學(xué)習(xí)前端？

1.網(wǎng)上找到的學(xué)習(xí)理由

《Java后端的我也要學(xué)Node.js 了》
https://blog.csdn.net/yusimiao/article/details/104689007

《nodejs后端開發(fā)的優(yōu)缺點(diǎn)（nodejs的概念與特征詳解）》
https://www.1pindao.com/baike/20159.html

《NodeJS學(xué)習(xí)總結(jié)》
https://blog.csdn.net/qq_42963930/article/details/109783739

2.為什么我也想學(xué)？

我對(duì)前端的掌握還停留在jquery時(shí)代：用ajax發(fā)起請(qǐng)求，用jqury填充數(shù)據(jù)。對(duì)已經(jīng)流行多年的"響應(yīng)式"一知半解。如果一個(gè)后端開發(fā)同學(xué)不懂流行的前端框架，可能使得接口設(shè)計(jì)的不合理、工作量評(píng)估不夠。

舉個(gè)例子.

兩年前我曾參與做過一個(gè)保存草稿的功能。用戶在正式提交業(yè)務(wù)數(shù)據(jù)之前，可以點(diǎn)擊“保存”按鈕把整個(gè)頁面的數(shù)據(jù)存為草稿。用戶再次進(jìn)入該頁面可以看到之前填寫的數(shù)據(jù)。

剛開始我認(rèn)為實(shí)現(xiàn)此功能非常容易：1.前端搜集頁面上用戶修改或填寫的數(shù)據(jù)然后傳給后端 2.后端存為草稿 3.要展示草稿時(shí)后端把草稿原樣返回前端。

這樣做聽起來沒什么問題。

但前端同學(xué)不同意這么做。他們要求展示草稿時(shí)后端返回的數(shù)據(jù)結(jié)構(gòu)，必須和用戶首次進(jìn)入業(yè)務(wù)處理頁面時(shí)后端給的數(shù)據(jù)結(jié)構(gòu)一模一樣。

為什么前端有如此要求：因?yàn)榍岸瞬捎玫氖琼憫?yīng)式框架,視圖和數(shù)據(jù)雙向綁定。后端返回同樣數(shù)據(jù)結(jié)構(gòu)，前端就能較容易地展示出來。采用jquery,找到頁面上的html 元素，然后修改其內(nèi)容的做法早已過時(shí)。

二、怎么學(xué)？

1.網(wǎng)上找資料

?
《怎么在Vue3中正確使用ElementPlus，親測(cè)有效，避坑》
https://blog.csdn.net/qq_44017116/article/details/127713704

《vue3使用element-plus》
https://blog.csdn.net/m0_66492535/article/details/128048780

《vue3+element plus+mockjs+echarts手把手搭建一個(gè)簡易框架代碼》
https://blog.csdn.net/liuxin00020/article/details/125082980

《Vue 3 結(jié)合TypeScript與Bootstrap、element-plus開發(fā)實(shí)踐》
http://ischoolcode.cn/post/157

2.看書、看教程

書名：《Vue.js 3.x快速入門》 作者：申思維;杜驍

?書名：《Vue.js 3.x高效前端開發(fā)(視頻教學(xué)版)》作者：李小威

菜鳥教程

https://www.runoob.com/vue3/vue3-tutorial.html

3.動(dòng)手敲代碼

我本來想搞一個(gè)blog系統(tǒng)，但沒那么容易。搞了幾天，從安裝nodejs開始，用vue3 、elementplus、axios、mockjs搞了一個(gè)簡單的能跑起來的工程。熟悉前端的同學(xué)可能只需半個(gè)小時(shí)，我卻搞了快十天，遇到不少問題。我是從零開始，基本上一行一行地敲的代碼。代碼在此：https://github.com/yongninghe/vue3-blog-front? 僅對(duì)前端小白有參考價(jià)值。準(zhǔn)備以后逐步完善。