掌握并熟练运用vue后,我们还需要知道什么

本文涉及的产品
云数据库 MongoDB,独享型 2核8GB
推荐场景:
构建全方位客户视图
简介: 掌握并熟练运用vue后,我们还需要知道什么起因最近,公司在招兵买马,吸纳了很多的优秀人才,起初我对这一现象并不重视,自我认为这就是因为公司最近的项目做的不错,老板要把项目做大做强,因此招一些技术大牛无可厚非,同时说句比较脸皮厚的话自己也不差,尤其是在这个前端这一块儿还是比较有信心的,但是偶然间和老大的一次谈话引起了我的警惕。

掌握并熟练运用vue后,我们还需要知道什么

起因

最近,公司在招兵买马,吸纳了很多的优秀人才,起初我对这一现象并不重视,自我认为这就是因为公司最近的项目做的不错,
老板要把项目做大做强,因此招一些技术大牛无可厚非,同时说句比较脸皮厚的话自己也不差,尤其是在这个前端这一块儿还是比较有信心的,
但是偶然间和老大的一次谈话引起了我的警惕。我发现事情并不是我原来想象的那样,新招的这些技术大牛基本都是偏向于全栈工程师,
由于公司要做大,要增加一个团队,招一些全栈的技术大牛无可厚非,但是有必要全都是吗?这其中一定有原因,我们公司现在做的项目主要用的就是前后端分离,
一个项目组中有一个美工,一个运维,一个项目负责人,两个前端,3个后台,别的先不说,一个前端写基本的页面,一个前端主要写MVVM的前端,
如果找全栈就团队就可以省去1-2人,对公司来说,既节省人力又节省成本,最重要的是还可以提升开发效率。所以现在前端就面临两个问题,
在未来的求职中将会被压低薪水,被迫转为纯前端或者全栈的风险。本来我还以为是我杞人忧天自己吓自己,所以就开始询问其他做程序猿的朋友和同学,
发现他们的公司也有这个苗头,虽然是苗头,但我还是决定去各个招聘网站看一看发现80%的公司(1-3年工作经验也是)都要求有后端开发的项目经验,虽然要求不高,
要求掌握一门php/java/python等后端语言。所以现在的虽然招的前端开发但其实是准全栈,我估计再过一段时间可能招的会是全栈。

注:以上仅代表个人观点

行动

基于上述的大胆想法,我决定好好的补一补后端的相关知识,形成一套自己的前端技术栈。

传统的前端:

html(html5)
css(css3)
js(jquery,zepto.js)
ajax

做前后端分离的前端还需要:

vue.js, rect, angular(至少其中一种)
webpack
node.js
git

增加的技术:

php/java/python等后台语言一种(我选python)
mysql/sql server/mongodb 等数据库语言的一种(我选mongodb)
再选一种服务器语言熟悉了解就行

开发环境(根据个人喜好)

个人技术栈

html5,
css3,
js,
vue.js (elemnt-ui, muse-ui)

node.js
webpack
git

epxress(koa)
mongodb

注:因为公司最近在新的磨合,自己有机会接触和跟上这一波的前端开发的趋势,感谢公司,感谢各位同事。

项目演示

img_56b1a422cfee1ea9f368144e96b9a2ec.gif
项目演示
img_61840d568ef8b8a535f6d44db2b9682b.gif
项目演示

项目实践

为了防止各位看官的喷,决定不拿公司的项目来说事儿,所以以一个在网上看的项目为原型,自己重写一个(一个自适应的小项目)。

参考项目地址

这个项目中有一些好的点子,所以我的给作者star一下,正是有这些具备开源精神的前辈我们才能在编程的路上越走越稳,越走越快。

但是这个项目个人不喜的一些地方:

1.为什么有了webpack后还要使用gulp?
个人认为现在webpack已经很强大了,gulp已经可以放一边了
2.写的没有规律
对于一个有强迫症的人来说,代码

项目我非常喜欢的地方:

1.express 的合并使用
因为在vue-cli的开发环境中已经使用了express,所以尝试了使用express+mongodb作为后端的开发组合,真的很棒,在我所看的几个
项目中的大部分是都是另起一个package.json,这样做的弊端就不言而喻了。
2.服务器端的代理设置
找了一个可免费使用的代理服务商jsonbird(前期可以不学着一块快速入手)
后期express代理配置学习

个人改进的地方

  1. element-ui不是一个可以进行响应式开发的框架
    个人通过学习如何进行组件的开发,我对我所熟悉的muse-ui和element-ui进行了修改,但还是有一定的问题,要想达到bootstrap兼容、适应的效果,
    就不得根据具体情况进行微调

  2. 如何引入express-generator

这个个人很简单各位童鞋可以试一下

  1. 改进代码

作为一个代码强迫症的人,如果别人不把代码按快进行书写,我是很难看下去的,
所以就自己试着写了一下。

代码分析

1.拷贝数据

本示例抓取的是豆瓣的相关数据,只要在其代码的js中找到该api即可,本示例为:
http://api.douban.com/v2/movie/in_theaters?count=
由于该api可以直接读取数据不用使用反向代理技术
另外一点,我们使用第三方的数据一般不会使用每条记录中的所有数据,并且不会使用所有的记录,而是使用若干条记录。
所以,该实例的中的server/db/data.js有一定的参考价值。

2.既然是要做后端我们就要知道经典的mvc,了解MVVM中的m

m代表的是模型,它实现的是业务逻辑,
本示例的一个model文件为server/models/schema/move.js用来创建move的集合(也即我们常见的表)
并定义每行文档的数据类型(我们常见的数据记录,行)

  1. 实现该model的操作

数据的操作即是增删改查

// 查询所有电影
router.get('/movie', (req, res) => {
    Movie
    .find({})
    .sort({
        update_at: -1
    })
    .then(movies => {
    res.json(movies)
 })
 .catch(err => {
    res.json(err)
 })
})

// 添加一部电影
router.post('/movie', (req, res) => {
  //使用Movie model上的create方法储存数据
  Movie.create(req.body, (err, movie) => {
      if (err) {
        res.json(err)
      } else {
        res.json(movie)
      }
    })
})

// 更新一部电影
router.put('/movie/:id', (req, res) => {
    Movie.findOneAndUpdate({
    _id: req.params.id
  }, {
    $set: {
      title: req.body.title,
      rating: req.body.rating,
      poster: req.body.poster,
      introduction: req.body.introduction
    }
  }, {
    new: true
  })
  .then(movie => res.json(movie))
  .catch(err => res.json(err))
})

// 删除一部电影
router.delete('/movie/:id', (req, res) => {
  Movie.findOneAndRemove({
      _id: req.params.id
    })
    .then(movie => res.send(`${movie.title}删除成功`))
    .catch(err => res.json(err))
})

本文只是我有感而写,这段时间根据公司前段时间的体会和公司同事的帮助,以及自己最近学习体会总结而成。

运行项目

npm install 安装依赖

npm run dev 打包编译

npm run data  获取数据

npm run server  启动服务

github源码地址https://github.com/lvzhenbang/vue2-express

如果喜欢就star一下!

相关实践学习
MongoDB数据库入门
MongoDB数据库入门实验。
快速掌握 MongoDB 数据库
本课程主要讲解MongoDB数据库的基本知识,包括MongoDB数据库的安装、配置、服务的启动、数据的CRUD操作函数使用、MongoDB索引的使用(唯一索引、地理索引、过期索引、全文索引等)、MapReduce操作实现、用户管理、Java对MongoDB的操作支持(基于2.x驱动与3.x驱动的完全讲解)。 通过学习此课程,读者将具备MongoDB数据库的开发能力,并且能够使用MongoDB进行项目开发。   相关的阿里云产品:云数据库 MongoDB版 云数据库MongoDB版支持ReplicaSet和Sharding两种部署架构,具备安全审计,时间点备份等多项企业能力。在互联网、物联网、游戏、金融等领域被广泛采用。 云数据库MongoDB版(ApsaraDB for MongoDB)完全兼容MongoDB协议,基于飞天分布式系统和高可靠存储引擎,提供多节点高可用架构、弹性扩容、容灾、备份回滚、性能优化等解决方案。 产品详情: https://www.aliyun.com/product/mongodb
相关文章
|
10天前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
70 1
|
21天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
2月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
51 1
vue学习第一章
|
2月前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
48 1
|
2月前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
41 1
vue学习第四章
|
2月前
|
JavaScript 前端开发 算法
vue学习第7章(循环)
欢迎来到瑞雨溪的博客,一名热爱JavaScript和Vue的大一学生。本文介绍了Vue中的v-for指令,包括遍历数组和对象、使用key以及数组的响应式方法等内容,并附有综合练习实例。关注我,将持续更新更多优质文章!🎉🎉🎉
34 1
vue学习第7章(循环)
|
2月前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript与Vue的大一学生,自学前端2年半,正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
39 1
vue学习第九章(v-model)
|
2月前
|
JavaScript 前端开发 开发者
vue学习第十章(组件开发)
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容,适合前端开发者学习参考。持续更新中,期待您的关注!🎉🎉🎉
52 1
vue学习第十章(组件开发)
|
2月前
|
JavaScript 前端开发
vue学习第十一章(组件开发2)
欢迎来到我的博客,我是瑞雨溪,一名自学前端两年半的大一学生,专注于JavaScript与Vue。本文介绍Vue中的插槽(slot)使用方法,包括基本插槽、具名插槽及作用域插槽,帮助你在组件开发中实现内容的灵活定制。如果你觉得有帮助,请关注我,持续更新中!🎉🎉🎉
25 1
vue学习第十一章(组件开发2)
|
2月前
|
监控 JavaScript 前端开发
vue学习第十二章(生命周期)
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。本文深入探讨了Vue实例的生命周期,从初始化到销毁各阶段的关键钩子函数及其应用场景,帮助你更好地理解Vue的工作原理。如果你觉得有帮助,欢迎关注我,将持续分享更多优质内容!🎉🎉🎉
37 1
vue学习第十二章(生命周期)
下一篇
开通oss服务