前端开发碎碎念
工作也有一段时间了,平时忙于业务代码的编写中,发现身边的一些人以及自己,对一些基本概念理解有所偏差,可能闹出笑话,会问出下面这些常识性错误的奇怪问题:
2333,怎么都是关于Vue的问题。。。我真没黑Vue开发者,不过也可以看出,Vue的小白受众的确比较多。 博客原文 webpack和webpack-dev-server现在基于Vue,React的SPA单页应用开发,都倾向于采用webpack的模块化构建方案。可能大多数人,开发一个项目,会使用脚手架工具(vue-cli,create-react-app) webpack-dev-server是webpack官方提供的一个小型Express服务器,正是因为webpack-dev-server自己开启了一个服务器,我们才能够前后端分离开发(我们不需要关心后端的代码)。前端启动的这个服务器,是用来构建和渲染页面,并提供了自动刷新和热替换功能。 简单来说: 路由什么是路由? 在web开发中,路由分为前端路由和后台路由 app.get('/about',function (req,res) { res.render('about',{ title: 'Hey',message: 'Hello there!'}); }); app.get('/',res) { res.render('index'); }); 传统的web网站,所有的路由都是由后台定义的。当我们想访问一个页面 然而单页应用的出现,改变了这个模式。如果你是前端开发,应该对这段代码更加熟悉: routes: [ { path: '/user/:userId',name: 'user',component: User },{ path: '/about/',name: 'about',component: About } ] 前端路由是将页面的渲染权交给了js控制,不通过请求服务器来判断渲染页面。前端一般利用histroy和hash来控制,达到不刷新页面可以使显示内容发生变化,这样速度更快,用户体验更好。前端路由解放了服务端,专心提供接口数据服务。 打包部署脚手架生成的项目,一般运行
部署的方式有很多,比如可以把dist文件和后台代码放在一起,后台把dist文件当做静态资源读取即可。不过因为采用了前端路由的方案,后台还需要配置一下,以Express举例: // 访问静态资源文件 这里是访问所有dist目录下的静态资源文件 app.use(express.static(path.resolve(__dirname,'../dist'))) // 因为是单页应用 所有请求都走/dist/index.html // 这一句要放在所有其他路由的后面 app.get('*',function(req,res) { const html = fs.readFileSync(path.resolve(__dirname,'../dist/index.html'),'utf-8') res.send(html) }) 也可以把dist静态文件和后台代码分开,通过Nginx部署 server { listen 80; server_name 127.0.0.1; location / { root /data/deered/dist; #前端打包后的dist文件位置 try_files $uri $uri/ /index.html; #防止页面刷新404 index index.html; } } 跨域因为webpack-dev-server启动了一个服务器,所以在开发时,前端去请求真正的后台接口,是存在跨域问题的。webpack提供了跨域的解决方案,原理就是让服务器反向代理请求真正的接口 vue-cli配置跨域 proxyTable: { '/api': { target: 'http://localhost:8089/api/',changeOrigin: true,pathRewrite: { '^/api': '' } } }, 前端请求 有些人就会有疑惑,那打包后的文件,是不是也能跨域。前面我们说了,线上部署就不是运行 如果你把打包后的dist文件和后端代码放在一起,那么根本就不存在跨域问题! server { listen 80; server_name 127.0.0.1; location / { root /data/deered/dist; #前端打包后的dist文件位置 index index.html; try_files $uri $uri/ /index.html; } location /api { proxy_pass http://127.0.0.1:8089 #后台地址 } } Vue和ReactVue的指令和模板语言让开发者可以很简洁的完成一个复杂的功能,而React的JSX语法,则让开发者拥有更多的自主权。 我们其实可以从本质上来看: 一个Vue的组件: <template> <div class="hello" @click="say"> <h1>{{ msg }}</h1> <h2 v-if="show">show me</h2> </div> </template> <script> export default { name: 'Hello World',data () { return { msg: 'Welcome to Your Vue.js App',show: false } } methods: { say() { console.log('hi') } } } </script> <style scoped> h1,h2 { font-weight: normal; } </style> 一个React的组件 const styles = { fontWeight: 'normal' } export default class Hello extends Component { constructor(props) { super(props); this.state = { msg: 'Welcome to Your React App',show: false }; } say() { console.log('hi') } render() { return ( <div class="hello" onClick={this.say}> <h1 className={styles}>{this.state.msg}</h1> {this.state.show ? <h2>show me</h2> : null} </div> ) } } 从两个组件对比就能看见: 而Vue就不一样了,Vue组件其实就是个普通的对象,你只是在修改这个对象的属性: 因此,React本质上是不可能给你提供类似 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |