vue-cli4.0+springboot 项目 12h 开发记录

本贴最后更新于 1708 天前,其中的信息可能已经沧海桑田

一、最近这一段时间,一直有两个兄弟在和我一起学习,是不是的会督促一下,问一下今天学了什么。于是我就想到一个 idea,为啥不做一个 todolist 去记录下每天要做的事情,完成了今天才算过去,大家也可以公开透明看到,互相督促。于是就开始着手做。

二、环境准备,首先本地开发环境为 vue4.0 JDK1.8 maven3.6.2。服务器上的环境为 JDK1.8 MySQL8.0 前端开发用的是 vue,后端开发用 SpringBoot

三、前端开发:

  • vue create project_name 创建项目
  • vue ui 启动图形化界面 安装相关依赖
  • app 组件中将内容改成如下,即根据路由显示页面 ```
    ```
  • 创建 router.js,里边写入需要导航的页面,我们目前只有一个 home 页面
  • 在 main.js 里边导入相关依赖,使用 router,主要的依赖如下 ```
    "dependencies": {
    "axios": "^0.19.2",
    "core-js": "^3.6.4",
    "qs": "^6.9.1",
    "stylus": "^0.54.7",
    "stylus-loader": "^3.0.2",
    "vue": "^2.6.11",
    "vue-axios": "^2.1.5",
    "vue-router": "^3.1.6"
    }
    
    
  • 然后创建 pages 目录,正式开始代码编写:里边的主要内容是一个标题,一个输入框(输入今天要做的事情),一个按钮(提交事情),一个 ul 列表(展示 list),每个 list 后又一个按钮(完成该事情)。
  • 后端交互逻辑:页面初始化发送请求得到所有的 list 并在页面展示;点击提交事情按钮,将该时间信息发送至后台处理,并重新执行初始化函数;点击完成按钮,将该事件 id 发送至后台处理,并重新执行初始化函数。

四、后端开发

  • 编写 SQL 文件,通过 navicat 远程连接服务器数据库并执行 SQL 文件完成数据库的创建。
  • 在 IDEA 中创建 SpringBoot 项目,新建 application.yml 文件代替 application.properties 文件,写入相关配置,如项目路径,数据源,启动端口等等。
  • 按照顺序编写 entity,repository,service 和 controller 层。并伴随着统一返回结果(由于时间问题,没有做统一异常处理),对 service 层和 repository 进行单元测试
  • 创建 config.Cors.java 用来解决跨域问题(比较习惯用后端解决跨域),该类的核心在于,设置一个 fliter,允许你指定的某个或者某些域可以访问,例如允许你本地访问就是加入 http://localhost:port,以及你前端项目部署之后的域,一般只要设置这两个就可以了。注意这个 origin ,对任何一个字符都敏感,例如我写成了 http://localhost:port/,仅仅是多了一个“/“,他就告诉我这个请求是跨域的。这一点要注意。
  • 以上是第一个难点,第二个难点是自己对后端接受参数了解好不够深入。
  • @PathVariable,这个比较简单,请求路径写成 xxx/id,这样就能把 id 注入
  • @RequestParam,这个接受的 application/x-www-from-urlencoded 会自动根据传过来的数据根据名字自动注入,一般前端默认的也都是这个类型
  • @RequestBody,这个接受的是一个 JSON 字符串,不是 JSON 对象,注意前端传过来的类型是 application/json,但是前端不能直接传入{"key":"val"}的对象,必须通过 JSON.Stringify()转换成 JSON 字符串,然后后端会根据名字注入相应的参数,这个一般用于注入一个类
  • 不加注解,接受 application/x-www-from-urlencoded。会自动根据名字进行参数注入,注意如果是一个类的话,里边的字段名和参数名一定要保持一致。

五、前端向后端传递的参数问题

  • 传递 application/x-www-from-urlencoded 类型时候,要用 qs 库将 JSON 对象变成表单形式,注意不要将该对象再封装一层,如 data = {"key":"val"},然后再参数中 stringify({"data": data})。这样写是错的,自己调试了好长时间。。。。
    this.$qs.stringify({
                        content: this.inputValue,
                        isFinish: false,
                        date: date.year + '-' + date.month + '-' + date.date
                    })
    
  • 传递表单数据,上述方式,对应后端接受的就是一个没有注解的一个类。。如果只传递一个参数,后端就是一个加上 @RequestParam 的参数(该注解应该不加也可以,待验证)。

六、后端部署

  • 以上问题解决之后,用 mvn package 打包,然后进入 target 文件夹,将生成的 jar 包利用 scp 命令传输到服务器,利用守护线程的启动方式将 jar 包启动。例如:nohup Java -jar test.jar >output 2>&1 &

七、前端测试真实后端接口

  • 后端上线之后,前端的请求路径要做相应的改动,从 localhot 要改成相应的后端路径如 http://域名或 ip:port/api/xxxxxx
  • 由于后端已经解决的跨域问题(前端的本地和线上都解决了),这个时候前端的数据应该仍然是正常的。

八、前端部署前的相关配置

  • 刚开始我没有进行这一步的配置,直接打包生成 dist 文件,然后打开之后发现是白屏,猜测应该是资源访问不到。然后查询很多资料,基本上都是让找到 config/index.js 或者是 vue.config.js 进行 assets 目录的路径配置,因此选择第二种。
  • 在根路径下(注意不是 src 目录,是项目根目录)建立 vue.config.js 文件,加入如下代码。其中解决了白屏问题的应该是第三个配置,指定 assertsDir,后边的这个路径是相对于 vue.config.js 的路径。项目路径如下图,因此写法如下。
module.exports = {
    // 部署应用时的基本 URL
    publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
    // build时构建文件的目录 构建时传入 --no-clean 可关闭该行为
    outputDir: 'dist',
    // build时放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
    assetsDir: './src/assets',
    // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
}

九、前端部署

  • 首先在项目根路径下通过 npm run build 进行项目打包,之后会在项目根路径下生成 dist 文件,这个文件就是可以直接打开的,就能直接用了。
  • 将 gitignore 中的 dist 路径删掉(vue 默认会在 Git 中忽略 dist 文件,因为这个文件是生成的,并且很大),这样让 Git 重新管理 dist,之后推送到 gitee 仓库,然后在 gitee page 服务这里部署你自己某个分支下的 dist 目录,然后点击部署,完成之后会在页面上出现一个路径,这个时候已经可以在线上访问你的前端了(当然后端服务也是可以的)
  • 注意由于后端的接口都是 http,因此在 gitee 上部署服务的时候,不要勾选强制使用 https(因为勾选了,虽然你的项目可以用 https 访问,但是就不再允许你的项目通过 http 访问后台接口),如果你的后台服务也是 https,那么这里可以勾选强制开启 https

十、完毕,总结

  • 自己对一些经常用的点还是了解不太深,前端稍微一变动,后端就废掉,例如 controller 接受参数。
  • 这十二个小时,在第 6/7 个小时的时候已经完成开发。剩下近一半的时候都是在前后端联调和前端部署相关的配置。这一点自己还是有点弱。
  • 这次开发算是给以后踩了很多了雷,自己还是很满足的,毕竟以后的 vue+springboot 的开发上线就有参考而稍微容易些!!!
  • 继续努力,加油。
  • Spring

    Spring 是一个开源框架,是于 2003 年兴起的一个轻量级的 Java 开发框架,由 Rod Johnson 在其著作《Expert One-On-One J2EE Development and Design》中阐述的部分理念和原型衍生而来。它是为了解决企业应用开发的复杂性而创建的。框架的主要优势之一就是其分层架构,分层架构允许使用者选择使用哪一个组件,同时为 JavaEE 应用程序开发提供集成的框架。

    942 引用 • 1459 回帖 • 31 关注
  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    264 引用 • 665 回帖 • 1 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...

推荐标签 标签

  • Swift

    Swift 是苹果于 2014 年 WWDC(苹果开发者大会)发布的开发语言,可与 Objective-C 共同运行于 Mac OS 和 iOS 平台,用于搭建基于苹果平台的应用程序。

    36 引用 • 37 回帖 • 535 关注
  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug(漏洞)。

    75 引用 • 1737 回帖
  • 资讯

    资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息,资讯有时效性和地域性。

    55 引用 • 85 回帖 • 2 关注
  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    311 引用 • 546 回帖
  • TensorFlow

    TensorFlow 是一个采用数据流图(data flow graphs),用于数值计算的开源软件库。节点(Nodes)在图中表示数学操作,图中的线(edges)则表示在节点间相互联系的多维数据数组,即张量(tensor)。

    20 引用 • 19 回帖
  • 快应用

    快应用 是基于手机硬件平台的新型应用形态;标准是由主流手机厂商组成的快应用联盟联合制定;快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台;以平台化的生态模式对个人开发者和企业开发者全品类开放。

    15 引用 • 127 回帖 • 2 关注
  • TextBundle

    TextBundle 文件格式旨在应用程序之间交换 Markdown 或 Fountain 之类的纯文本文件时,提供更无缝的用户体验。

    1 引用 • 2 回帖 • 45 关注
  • FreeMarker

    FreeMarker 是一款好用且功能强大的 Java 模版引擎。

    23 引用 • 20 回帖 • 461 关注
  • 房星科技

    房星网,我们不和没有钱的程序员谈理想,我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源,遍布昆明全城的 100 家门店、四千地产经纪人是我们坚实的后盾。

    6 引用 • 141 回帖 • 584 关注
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 402 关注
  • CongSec

    本标签主要用于分享网络空间安全专业的学习笔记

    1 引用 • 1 回帖 • 10 关注
  • Solidity

    Solidity 是一种智能合约高级语言,运行在 [以太坊] 虚拟机(EVM)之上。它的语法接近于 JavaScript,是一种面向对象的语言。

    3 引用 • 18 回帖 • 383 关注
  • 倾城之链
    23 引用 • 66 回帖 • 138 关注
  • 安装

    你若安好,便是晴天。

    132 引用 • 1184 回帖 • 1 关注
  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库,并提供多种语言的 API。从 2010 年 3 月 15 日起,Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始,Redis 的开发由 Pivotal 赞助。

    286 引用 • 248 回帖 • 74 关注
  • OpenStack

    OpenStack 是一个云操作系统,通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成,同样也可以通过 Web 接口让最终用户部署资源。

    10 引用 • 2 关注
  • HBase

    HBase 是一个分布式的、面向列的开源数据库,该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable:一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样,HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 70 关注
  • Electron

    Electron 基于 Chromium 和 Node.js,让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目,兼容 Mac、Windows 和 Linux,它构建的应用可在这三个操作系统上面运行。

    15 引用 • 136 回帖
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”,在线用户由 1999 年的 2 人(马化腾和张志东)到现在已经发展到上亿用户了,在线人数超过一亿,是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖 • 85 关注
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎,它支持自动化部署、大规模可伸缩、应用容器化管理。

    110 引用 • 54 回帖 • 3 关注
  • GitHub

    GitHub 于 2008 年上线,目前,除了 Git 代码仓库托管及基本的 Web 管理界面以外,还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。正因为这些功能所提供的便利,又经过长期的积累,GitHub 的用户活跃度很高,在开源世界里享有深远的声望,并形成了社交化编程文化(Social Coding)。

    209 引用 • 2031 回帖
  • SVN

    SVN 是 Subversion 的简称,是一个开放源代码的版本控制系统,相较于 RCS、CVS,它采用了分支管理系统,它的设计目标就是取代 CVS。

    29 引用 • 98 回帖 • 684 关注
  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据(或者事件)流的 API。它组合了观察者模式,迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 153 关注
  • RESTful

    一种软件架构设计风格而不是标准,提供了一组设计原则和约束条件,主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制。

    30 引用 • 114 回帖 • 2 关注
  • 运维

    互联网运维工作,以服务为中心,以稳定、安全、高效为三个基本点,确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    148 引用 • 257 回帖 • 1 关注
  • 分享

    有什么新发现就分享给大家吧!

    247 引用 • 1792 回帖 • 7 关注
  • 脑图

    脑图又叫思维导图,是表达发散性思维的有效图形思维工具 ,它简单却又很有效,是一种实用性的思维工具。

    25 引用 • 83 回帖