vue+springboot开发打卡网页端腾讯云部署
vuecli开发
同时用ip和localhost访问
https://blog.csdn.net/weixin_42236396/article/details/116483855
使用sweetalert2
npm i sweetalert2
main.js>>
import VueSweetalert2 from 'vue-sweetalert2'
import 'sweetalert2/dist/sweetalert2.min.css'
Vue.use(VueSweetalert2)
使用axios
npm i axios
main.js>>
import axios from 'axios'
Vue.prototype.$axios = axios
数据的引用
父组件：
子组件:
内网穿透
我使用花生壳
访问出现Invalid Host header
webpack.base.conf.js>>
devServer: { disableHostCheck: true, },
内网穿透可以让自己笔记本电脑做服务器，可以公网访问。不过每次访问，前端vue服务器要打开，后端springboot要打开，mysql3306端口也要打开，于是寻求云服务。（暂时解决前端部署）
前端部署在腾讯云的静态网站托管，访问网址 ：打卡APP
后端还在研究腾讯云怎么部署springboot和数据库
代码已托管于码云
前端代码：前端
后端代码：后端
/**
*2022 04 19 续
*以下
*/
前端
前端云部署教程
（idea开发vue安装Vue.js插件，使用npm命令安装node.js）
我的命令行如下(#后是注释 i是install的缩写 g是global的缩写)
npm install -g cnpm --registry=https://registry.npm.taobao.org #更换下载地址为淘宝之后所有使用npm的可以替换成cnpm下载速度更快
npm i -g @cloudbase/cli #云开发CLI工具安装
npm i http-server -g #下载本地http 可以不下载
npm i vue-cli@2.96 #vue2开发下载vue-CLI3以下版本
vue -V #显示vue-CLI版本
vue i -g webpack #下载webpack打包工具
npm i webpack webpack-cli -g
npm i webpack webpack-dev-server-g
webpack -v #显示webpack版本
vue init webpack clock #新建项目 clock是你的项目名
npm i rimraf -g #我下载时出现了网络中断的情况 node_modules下载到一半，不要尝试直接删除 下载rimraf包
ramraf node_modules # 删除node_modules
npm cache clean -g # 删除缓存
npm i #安装运行vuecli项目的node_modules
npm i --save vue-sweetalert2 #安装项目需要用到的sweetalert2
npm i --save axios #安装项目需要用到的axios
npm run build # 项目打包成dist文件
tcb login #云开发登录
cd dist #进入dist目录
tcb hosting deploy -e envID #上传dist目录到静态托管
后端
购买腾讯云轻量服务器
安装linux宝塔应用
通过面板首页地址进入宝塔面板
安装LNMP，安装jdk（我下载了tomcat）就能部署springboot项目
不会添加java项目的话可以查看 Java项目教程，添加一个jenkins项目
文件目录放置自己的项目jar或者war包
启动后记得放行（面板安全和腾讯云服务器端口同时打开）就可以通过 IP:端口 访问你的项目啦
关于数据库
放行888端口，使用phpMyAdmin操作数据库
注意事项
springboot项目连接数据库为localhost,点击maven的Lifecycle的package就可以打包成jar包
总结：
这是我两个月前寒假时开发的打卡app，这个项目一直鸽到现在，总算划上了一个句号。
前几天运行的时候报了deprecated的警告甚至不能运行。我就把node.js卸载了重新按照上方命令行操作了一通。
也顺利重新部署到腾讯云静态托管。现在网站正在备案，备案好后我会添加我的域名。
购置服务器后关于后端不能访问也搞了很久，发现原因就是腾讯云服务器和宝塔面板没有同时放行。
前端部署到静态托管通过axios访问，要访问https内容，后端为http://IP:端口，因此服务器Java项目在SSL证书要自行添加。
我因为只有一个域名（部署到前端）后端还是用花生壳（有其他域名就SSL证书添加，前端API要改）
花生壳有一个免费？的https壳域名，前端API的IP部分改成访问地址
前后端分离项目部署到云，我用的技术有些许过时（你能看到很多deprecated），我做的内容有些许简单（简单的打卡），
我的代码有些许不规范（开发伊始不知道Java规范手册和Restful接口规范等），我的blog有些许错综复杂（条理错乱）。
但这仍然是一次宝贵的开发经验和记录，找出不足，查漏补缺。更新，进步才是我要做的。
要学的还有很多很多，学习不止！
/**
*2022 04 21 续
*以上
*/
可能出现的问题
删除node_modules文件
下载rimraf
npm i rimraf -g
删除node_modules
rimraf node_modules
执行npm i命令出现 npm ERR! cb() never called!
清除缓存npm cache clean -f
下载npm helpnpm install -g n -f
命令行服务器http-server
打开vue项目打包后的dist目录
下载http-servernpm i http-server -g
普通打开命令行输入http-server
跨域打开命令行输入http-server --cors - p XXXX -o (XXXX是端口号)
-p 端口号 (默认 8080)
-a IP 地址 (默认 0.0.0.0)
-d 显示目录列表 (默认 'True')
-i 显示 autoIndex (默认 'True')
-e or --ext 如果没有提供默认的文件扩展名(默认 'html')
-s or --silent 禁止日志信息输出
--cors 启用 CORS via the Access-Control-Allow-Origin header
-o 在开始服务后打开浏览器
-c 为 cache-control max-age header 设置Cache time(秒) , e.g. -c10 for 10 seconds (defaults to '3600'). 禁用 caching, 则使用 -c-1.
-U 或 --utc 使用UTC time 格式化log消息
-P or --proxy Proxies all requests which can't be resolved locally to the given url. e.g.: -P http://someurl.com
-S or --ssl 启用 https
-C or --cert ssl cert 文件路径 (default: cert.pem)
-K or --key Path to ssl key file (default: key.pem).
-r or --robots Provide a /robots.txt (whose content defaults to 'User-agent: *\nDisallow: /')