全栈学习
全栈开发学习(Node+Vue+Mongodb)笔记
BOL4
这个作者很懒,什么都没留下…
展开
-
基于AdonisJS的响应式个人博客
这个博客我是在b站全栈之巅学习的,用的是一个比较冷门的Node.js web 框架AdonisJS,这个框架和PHP Web开发框架 Laravel非常相似,开发时间比较短,大家感兴趣可以去学习一下,1~2个小时就可以上手。AdonisJS网上相关的学习资源也比较少,所以遇到问题我基本上都是查看AdonisJS的官方文档。虽然目前博客功能比较简单,但是因为喜欢简约风所以我也不打算把功能做得太复杂。...原创 2020-04-11 23:16:07 · 403 阅读 · 0 评论 -
项目部署--让我们开发的网站能够通过域名被大家访问
1 生产环境编译baseURL替换baseURL:process.env.VUE_APP_API_URL || ‘/admin/api’ 改成没有localhost的地址 同时添加环境变量文件用于生产模式 VUE_APP_API_URL=http://localhost:3001/admin/api在admin中 加入vue.config.js,内容module....原创 2020-04-03 00:16:55 · 314 阅读 · 0 评论 -
基于Vue+Node.js的菜谱webapp
基于Vue+Node.js的移动端菜谱网站【Food Corner】是我在学习Vue、Node.js等相关技术后独立开发完成的一个移动端菜谱网站,包含一个后台管理系统,参考了现在主流菜谱应用的功能和界面设计。从3月初开始选择一个自己感兴趣的内容到最后基本上完成想要实现的功能,总共花费了大半个月的时间,虽然说是完全自己开发的,但是还是在之前练手的王者荣耀移动端基础上进行开发,也参考了一些开源的项...原创 2020-03-31 19:54:49 · 2015 阅读 · 8 评论 -
全栈开发学习(Node+Vue+Mongodb)(十)——后台数据展示到移动端页面
本专题文章共十篇,已完结,后续有补充会实时更新。1 后台数据录入录入后台数据的各种分类(手动)爬取官网的数据Chrome 里console中输入:$$(‘选择器’) =》$$('选择器 ').map(el=>el.innerHTML) =》*.slice(5) * //跳过5条数据在数据库中引入所有模型 ,在server里安装:npm i require-...原创 2020-02-20 12:01:32 · 339 阅读 · 0 评论 -
全栈开发学习(Node+Vue+Mongodb)(九)——移动端页面搭建(详情页部分)
1 文章详情页<template> <div class="article"> <div class="d-flex py-3 px-2 border-bottom"> <div class="iconfont icon-back text-blue-light" @click="$router.push('/')">&...原创 2020-02-20 10:54:25 · 202 阅读 · 0 评论 -
全栈开发学习(Node+Vue+Mongodb)(八)——移动端页面搭建(主页部分)
前面我们完成了后台管理界面的基本功能,接下来就需要完成移动端页面的搭建与数据的展示。移动端的搭建主要以旧版王者荣耀官网主页样式为模板,本文主要介绍前端搭建的流程与一些基本组件的使用。1 准备工作样式思路:使用SASS规范化我们的所有样式,安装:npm i -D sass sass-loader,并且将所有样式相关的内容放在style.scss中,再在main.js中应用样式重...原创 2020-02-19 15:20:11 · 221 阅读 · 0 评论 -
全栈开发学习(Node+Vue+Mongodb)(七)——登录页面
1 新建管理员账户模块新建管理员模型,需要提前在server中安装模块bcryptjs: npm i bcryptjs,用于密码散列const schema=new mongoose.Schema({ //字段以及字段类型 username:{type:String}, password:{ type:String, sel...原创 2020-02-17 14:52:05 · 458 阅读 · 0 评论 -
全栈开发学习(Node+Vue+Mongodb)(六)——图片上传
在本系列第四篇文章中简单介绍了一下引入elementUI的图片上传组件,但是没有进行详细说明,本文将详细介绍如何上传图片。1 后端部分新建上传路由app.post('/admin/api/upload',async(req,res)=>{ const file=req.file res.send(file) })创建中间件需要先在server中安装...原创 2020-02-17 11:37:35 · 403 阅读 · 1 评论 -
全栈开发学习(Node+Vue+Mongodb)(五)——通用CRUD接口
上一章总结了项目中常用的CRUD操作和常见问题,但是由于一个个写不同内容的接口过于冗余,其功能大体上是一致的,所以需要将接口进行改造,转变为通用的CRUD接口。这样当前端请求不同种类的接口时可以根据模型的类型来进行转化与匹配,大大降低代码的重复度。1 基本思路修改路径成为动态资源封装接口并且加上动态参数通过传来的动态参数查找到对应的模型文件,并且修改原来固定的模型名为动态获取...原创 2020-02-15 14:52:55 · 240 阅读 · 0 评论 -
全栈开发学习(Node+Vue+Mongodb)(四)——后台数据的CRUD操作
1 新增数据提交数据的基本步骤:前端在data()中定义modeldata(){ return{ model:{} } }表单数据绑定model,model中的属性要和定义的该模型的字段相匹配 //输入框<el-input v-model="model.name"></el-input&g...原创 2020-02-15 14:52:12 · 237 阅读 · 0 评论 -
全栈开发学习(Node+Vue+Mongodb)(三)——后台接口与数据库准备
1 前端接口(admin)准备安装axios用于请求接口提交数据:npm i axios在admin根目录新建http.js文件,在文件中引入axiosimport axios from 'axios'在http.js中创建实例const http=axios.create({ baseURL:'http://localhost:3000/admin/api' ...原创 2020-02-15 14:51:15 · 470 阅读 · 0 评论 -
全栈开发学习(Node+Vue+Mongodb)(二)——后台管理界面的搭建
1 用ElementUI搭建基本的后台界面框架准备工作:在admin文件夹安装:vue add element 安装路由用于界面跳转:vue add router左侧导航:在Main.vue中粘贴ElementUI官方文档里的导航写法,根据需求修改导航 ,需求如下所示:内容管理物品:新建物品、物品列表英雄:新建英雄、英雄列表文章:新建文章、文章列表运营管...原创 2020-02-15 14:50:19 · 333 阅读 · 0 评论 -
全栈开发学习(Node+Vue+Mongodb)(一)——开发前的准备工作
全栈开发学习(Node+Vue+Mongodb)(一)——开发前的准备工作寒假开始之后开始跟着b站的全栈大佬学习开发web端的项目,正好去年暑假的时候做导师项目也学习了这方面的相关知识,但是当时对于很多概念还不是很清晰,导致项目做出来功能也不是非常完善,也没有相应的后台管理系统,只是粗略的入门了vue的相关知识,所以打算趁着找实习前的最后一段时间做几个比较完整的项目。这个项目的完成耗费了10天...原创 2020-02-15 14:47:50 · 258 阅读 · 1 评论