小白的全栈开发一

hiyayiji 发布于2019-06-26 17:11 / 2473人阅读

摘要：小白的全栈开发一简介从新手的角度对有了解，对和有了解。希望能够帮助和我一样是全栈小白的你看过很多关于怎么搭建全栈的文章，部分可能有借鉴。因为要自己独立完成，所以开始自己的全栈之旅。分享出来我的全栈经历，并记录我的毕设进度逃。

小白的全栈开发一 简介

从新手的角度（对vue有了解，对Koa和Express有了解。）从0开始搭建一个通过RESTful API提供数据，vue组成的单页面的前端项目。希望能够帮助和我一样是全栈小白的你（看过很多关于怎么搭建全栈的文章，部分可能有借鉴）。

马上毕业了，毕设题目是XXX课程网站，就是一个类似B站的网站。学生可以观看视频，文档(暂定为word和pdf)，可以在视频和文档下面进行评论。由老师上传视频和文档。因为要自己独立完成，所以开始自己的全栈之旅。分享出来我的全栈经历，并记录我的毕设进度(逃~)。
-　当时构想自己的网站是这样的：是一个spa，有vue express提供接口api mongodb

开启全栈之旅

首先这些东西你要有，node vue-cli webpack mongodb，准备好之后我们就开始全栈之旅吧

开始创建项目

cd到你的想创建目录的文件夹然后在命令行 vue init webpack vuefile（你自己定的项目名称）

这里说一下这个ESLint 这是一个代码风格检查的插件，你的缩进是两个空格还是四个空格，你用不用: 当你的代码不符合ESLint的规则时就会报错，及时你的代码语法和逻辑都没错。看自己喜好选择yes还是no。如果不小心回车选择了yes。一会告诉你怎么解决。

然后就和截图上面一样 cd到vuefile 然后npm install一键安装依赖项最后npm run dev 你的vue就可以跑起来了。大概长这样

补上前面的坑，如果你的ESLint选了Yes 在vuefile>build>webpack.base.conf.js 找到eslint-loader 并将代码块注释。

项目已经创建完成了下面要将项目改成spa

　登录界面构建

进入我们的vue工作区(src文件夹)

找到main.js 改成这个样子

import Vue from "vue"
import App from "./App"
import router from "./router"
import ElementUI from "element-ui" // 引入element-ui
import "element-ui/lib/theme-default/index.css"

Vue.config.productionTip = false
Vue.use(ElementUI)  //全局使用ElementUI 就可以在其他.vue文件使用element-ui
/* eslint-disable no-new */
new Vue({
  mode: "history", //开启history模式保证spa可以和以前的网页一样可以前进和后退
  el: "#app",
  router,
  template: "",
  components: { App }
})

在components 新建组件login

这一步运行需要npm install stylus 和 stylus-loader

为新的login.vue增加路由到router下的index.js

//... 前面的就不写了 引入其他需要的东西
import Login from "@/components/Login"
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: "/",
      name: "Hello",
      component: Hello
    },
    {
      path: "/login",
      name: "Login",
      component: Login
    },
  ]
})

在我们的浏览器中输入http://localhost:8080/#/login

长成上面的样子的话，估计就成功了

待续　荆轲刺秦王

云服务器 GPU云服务器小白小程序开发 python全栈开发全栈开发者全栈开发是什么

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/18960.html

前端小白的全栈初体验

摘要：原文来源全栈初体验前言据说现在不会点后台的前端都找不到工作了吓得我这几天看起了和并且做了一个应该算是最简单的前后端例子，如图输入账户密码，提交表单，保存信息到数据库再重定向到页面获取数据库中的信息，渲染在浏览器上具体代码主要技术前端模板后台原文来源：全栈初体验前言据说现在不会点后台的前端都找不到工作了吓得我这几天看起了Nodejs和MongoDB并且做了一个应该算是最简单的前后...

wangym 2019-08-29 12:29 评论0 收藏0
前端小白的全栈初体验

摘要：原文来源全栈初体验前言据说现在不会点后台的前端都找不到工作了吓得我这几天看起了和并且做了一个应该算是最简单的前后端例子，如图输入账户密码，提交表单，保存信息到数据库再重定向到页面获取数据库中的信息，渲染在浏览器上具体代码主要技术前端模板后台原文来源：全栈初体验前言据说现在不会点后台的前端都找不到工作了吓得我这几天看起了Nodejs和MongoDB并且做了一个应该算是最简单的前后...

Jioby 2019-08-01 16:43 评论0 收藏0
前端小白的全栈初体验

摘要：原文来源全栈初体验前言据说现在不会点后台的前端都找不到工作了吓得我这几天看起了和并且做了一个应该算是最简单的前后端例子，如图输入账户密码，提交表单，保存信息到数据库再重定向到页面获取数据库中的信息，渲染在浏览器上具体代码主要技术前端模板后台原文来源：全栈初体验前言据说现在不会点后台的前端都找不到工作了吓得我这几天看起了Nodejs和MongoDB并且做了一个应该算是最简单的前后...

PumpkinDylan 2019-06-26 17:14 评论0 收藏0
react + node + express + ant + mongodb 的简洁兼时尚的博客网站

摘要：前言此项目是用于构建博客网站的，由三部分组成，包含前台展示管理后台和后端。体验地址网站主页网站首页管理后台计划这次是一个完整的全栈式开发，只要部署了这三个项目的代码，是完全可以搭建好博客网站的。 showImg(https://segmentfault.com/img/remote/1460000017095592); 前言此项目是用于构建博客网站的，由三部分组成，包含前台展示、管理...

fish 2019-06-26 17:54 评论0 收藏0
Node中间层实践（一）——基于NodeJS的全栈式开发

摘要：总结我觉得，以后基于的全栈式开发的模式将会越来越流行，这也会引领前端步入工程化时代。欢迎继续关注本博的更新中间层实践一基于的全栈式开发中间层实践二搭建项目框架中间层实践三配置中间层实践四模板引擎中间层实践五中间层的逻辑处理版权声明：更多文章请访问我的个人站Keyon Y，转载请注明出处。前言近期公司有个新项目，由于后端人手不足，我果断的提议用node中间层的方案，得到了老大的支持...

warkiz 2019-08-22 13:59 评论0 收藏0