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

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

一、最近这一段时间,一直有两个兄弟在和我一起学习,是不是的会督促一下,问一下今天学了什么。于是我就想到一个 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 应用程序开发提供集成的框架。

    944 引用 • 1459 回帖 • 16 关注
  • Vue.js

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

    266 引用 • 665 回帖 • 1 关注

相关帖子

欢迎来到这里!

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

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

推荐标签 标签

  • 知乎

    知乎是网络问答社区,连接各行各业的用户。用户分享着彼此的知识、经验和见解,为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖
  • Typecho

    Typecho 是一款博客程序,它在 GPLv2 许可证下发行,基于 PHP 构建,可以运行在各种平台上,支持多种数据库(MySQL、PostgreSQL、SQLite)。

    12 引用 • 65 回帖 • 439 关注
  • 以太坊

    以太坊(Ethereum)并不是一个机构,而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity,使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物:投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖 • 1 关注
  • 单点登录

    单点登录(Single Sign On)是目前比较流行的企业业务整合的解决方案之一。SSO 的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统。

    9 引用 • 25 回帖
  • Sublime

    Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成,还支持通过插件进行扩展。

    10 引用 • 5 回帖 • 1 关注
  • Bug

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

    75 引用 • 1737 回帖 • 3 关注
  • 运维

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

    149 引用 • 257 回帖
  • Caddy

    Caddy 是一款默认自动启用 HTTPS 的 HTTP/2 Web 服务器。

    12 引用 • 54 回帖 • 164 关注
  • Notion

    Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.

    6 引用 • 38 回帖
  • 程序员

    程序员是从事程序开发、程序维护的专业人员。

    568 引用 • 3532 回帖 • 1 关注
  • 爬虫

    网络爬虫(Spider、Crawler),是一种按照一定的规则,自动地抓取万维网信息的程序。

    106 引用 • 275 回帖
  • WebComponents

    Web Components 是 W3C 定义的标准,它给了前端开发者扩展浏览器标签的能力,可以方便地定制可复用组件,更好的进行模块化开发,解放了前端开发者的生产力。

    1 引用
  • C++

    C++ 是在 C 语言的基础上开发的一种通用编程语言,应用广泛。C++ 支持多种编程范式,面向对象编程、泛型编程和过程化编程。

    107 引用 • 153 回帖 • 2 关注
  • Kafka

    Kafka 是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据。 这种动作(网页浏览,搜索和其他用户的行动)是现代系统中许多功能的基础。 这些数据通常是由于吞吐量的要求而通过处理日志和日志聚合来解决。

    36 引用 • 35 回帖 • 2 关注
  • SSL

    SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全(Transport Layer Security,TLS)是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层对网络连接进行加密。

    70 引用 • 193 回帖 • 431 关注
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起,它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖 • 1 关注
  • JetBrains

    JetBrains 是一家捷克的软件开发公司,该公司位于捷克的布拉格,并在俄国的圣彼得堡及美国麻州波士顿都设有办公室,该公司最为人所熟知的产品是 Java 编程语言开发撰写时所用的集成开发环境:IntelliJ IDEA

    18 引用 • 54 回帖 • 1 关注
  • Flutter

    Flutter 是谷歌的移动 UI 框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作,它正在被越来越多的开发者和组织使用,并且 Flutter 是完全免费、开源的。

    39 引用 • 92 回帖 • 1 关注
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    22378 引用 • 89573 回帖
  • TensorFlow

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

    20 引用 • 19 回帖
  • 正则表达式

    正则表达式(Regular Expression)使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    31 引用 • 94 回帖
  • Dubbo

    Dubbo 是一个分布式服务框架,致力于提供高性能和透明化的 RPC 远程服务调用方案,是 [阿里巴巴] SOA 服务化治理方案的核心框架,每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 597 关注
  • Maven

    Maven 是基于项目对象模型(POM)、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    186 引用 • 318 回帖 • 304 关注
  • Ruby

    Ruby 是一种开源的面向对象程序设计的服务器端脚本语言,在 20 世纪 90 年代中期由日本的松本行弘(まつもとゆきひろ/Yukihiro Matsumoto)设计并开发。在 Ruby 社区,松本也被称为马茨(Matz)。

    7 引用 • 31 回帖 • 210 关注
  • PHP

    PHP(Hypertext Preprocessor)是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点,主要适用于 Web 开发领域,据说是世界上最好的编程语言。

    179 引用 • 407 回帖 • 488 关注
  • Love2D

    Love2D 是一个开源的, 跨平台的 2D 游戏引擎。使用纯 Lua 脚本来进行游戏开发。目前支持的平台有 Windows, Mac OS X, Linux, Android 和 iOS。

    14 引用 • 53 回帖 • 530 关注
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统,它完整实现了 JMS 规范,是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 673 关注