#项目的编译和发布 #静态发布新浪云 #node服务器发布新浪云 #nodejs服务器部署数据库 #新浪云前后端结合

一. vue项目的编译和发布

脚手架中有大量的新技术:vue文件,es6模块.. 这些文件语法大部分浏览器无法直接运行
解决：开发好的项目,经过编译,打包,压缩,变成ES5代码部署到服务器
如何：npm run build
结果：自动在项目文件夹下新建dist文件夹,包含传统的代码

二. 将纯前端的静态的项目发布到新浪云服务器

将纯前端的项目发布到新浪云
1. 网址: https://www.sinacloud.com/
2. 选"产品"->"云应用SAE"->"进入控制台"->用新浪微博扫码登录
3. 点左上方"创建应用"->"我已确认"->

4. 点左侧"运行环境管理"->"代码管理"->在"版本列表"右侧->选择"上传代码包"
5. 进入用npm run build生成好的dist文件夹内部，选择所有文件，压缩。将压缩包拖拽到第5步打开的界面中方块内！
6. 上传成功，就可点击版本列表中的链接，访问自己新浪云上的静态网页了。
7. 在线编辑: 在"版本列表"右侧，"上传代码包"左边，有"在线编辑"，打开之后可以上传新文件，修改文件内容，删除旧文件！

三. 将标准的nodejs服务器端发布到新浪云服务器

1. 使用express脚手架生成工具，来创建一个标准的nodejs服务器端项目(1). 安装生成脚手架代码的命令行工具： npm i -g express-generator (2). 用命令行工具生成一个项目的脚手架代码: a. 先找到要创建项目的文件夹b. 在文件夹中打开cmdc. 输入: express 项目名d. 再输入: cd 项目名 , 进入项目文件夹e. 运行: npm i, 下载项目依赖的node_modules(3). 在本地测试服务器端项目是否正常运行: a. 用vscode打开项目文件夹b. 右键单击package.json文件，选择在集成终端中打开c. 在弹出窗口中输入： npm startd. 打开浏览器输入http://localhost:3000，看到示例网页，说明成功(4). 要想部署新浪云，必须修改服务器端项目端口为5050： bin/www文件中，找到3000，改为5050测试: 重启服务器端项目，打开浏览器访问http://localhost:5050，看到示例网页，说明成功！

2. 将服务器端项目部署到新浪云服务器：(1). 创建应用： 回到新浪云控制台，点创建应用，再点"我已确认"(2). 选择应用程序的配置: (4). 点"确认创建"，进入项目控制台(3). 上传代码:a. 官方的步骤说明:  左侧"运行环境管理"->代码管理b. 先在本地确认有没有人之前在这台电脑登录过新浪账号，并记住了密码！1). 点操作系统左下角开始菜单图标，在弹出的开始菜单中输入"控制面板"的拼音，在搜索结果中点"控制面板"2). 在控制面板中点"凭据管理器"->"windows"凭据: 3). 在下方的凭据列表中，如果有来自sinacload的凭据，要删除c. 先从新浪云服务器克隆空的git仓库文件夹到本地: 1). 先找到要放置nodejs项目的位置，在当前文件夹位置打开cmd2). 回到浏览器中项目控制台中"代码管理"下，复制"如何部署"下的第一句话: git clone https://git.sinacloud.com/xzserve2强调: 克隆过程中，要输入新浪云的用户名和密码在"代码管理"界面中"如何部署"上方的"Git仓库信息"中显示了用户名，但是密码必须自己记住。d. 从原来保存服务器端nodejs项目的文件夹中，全选所有文件，拷贝到刚克隆下来的文件夹中.e. 按照"如何部署"中的"编辑代码并部署代码"下的说明，进入项目文件夹内，执行以下命令:#进入项目文件夹 cd 项目文件夹#添加本地的文件改动 —— 只将改动记录在本地仓库git add .#添加本地修改的备注信息 —— 为本次本地的修改添加备注信息git commit -m '可自定义备注'#将改动推送到远程仓库 —— 将本地的修改推送到新浪云服务器远程保存git push origin master(3). 回到浏览器中应用程序控制台，点左侧"应用设置"->"应用信息"，可查看应用程序的网址。点网址测试服务器端是否部署成功！(4). 强调: 创建的nodejs类型的项目，可以删除。如果项目出错了，可以删除重建。

四. 在nodejs服务器端部署数据库和服务器端接口
1. 在本地开发并测试服务器端接口程序是否正确: (1). 删除express脚手架自带的模板机制:a. 删除views文件夹b. 删除app.js中: 12行, //views engine setup三句话(2). 将自己编写pool.js和index.js分别拷贝到本地服务器端项目中 a. pool.js放在项目的根目录下b. index.js放入routes文件夹下替换旧的index.jsc. 修改app.js中app.use('/', indexRouter);为app.use('/index', indexRouter);(3). 安装mysql驱动程序: npm i -save mysql(4). 在终端中npm start启动服务器端程序(5). 启动本地的xampp程序，启动mysql(6). 测试本地接口是否成功: 打开浏览器: 输入http://localhost:5050/index看到一个数组包含6个商品对象，说明本地接口开发成功!
2. 将数据库部署到新浪云服务器: (1). 打开服务器端应用程序的新浪云控制台(2). 点左侧的数据库与缓存(3). 选择共享型数据库，点开启(4). 点数据导入->新建导入任务->(5). 将本地做好的创建数据库的xxx.sql文件拖拽到网页中方块中(6). 点击"服务状态"，返回数据库首页，点"数据库管理：
使用phpMyAdmin(4.9)管理（推荐）"，打开管理界面，查看和编辑数据表和表中的内容.(7). 复制"数据库连接信息" 中的五项内容, 返回vscode中，修改pool.js中的五个属性。

vscode中的git: (1). vscode中自动集成了git在vscode的资源管理器文件列表中: M 修改过的文件；U 新增的文件(2). 在vscode左侧点第三个图标"源代码管理"，进入了git的管理界面(3). 提交代码修改到本地库; a. 在上方文本框中输入本次修改的备注b. 点顶部一排按钮中的对勾图标，提交(4). 用vscode将代码提交到新浪云: (5). 如果推送成功: 打开浏览器: 输入新浪云服务器端应用程序地址/接口名比如: http://xzserve2.applinzi.com/index能看到返回一个数组包含6个商品就算接口正确！

部署商品详情页的接口: (1). 将旧项目中routes文件夹下的details.js和query.js拷贝到新项目中routes目录下(2). 修改app.js，添加details接口: var detailsRouter= require("./routes/details");... ...app.use('/details', detailsRouter);(3). 先本地测试新接口是否成功: a. 暂时注释pool.js中新浪云远程数据库的连接信息b. 解开pool.js中的本地数据库的连接信息的注释。c. Ctrl+C关闭服务器端程序，再npm start重启(4). 结果: 打开浏览器: http://localhost:5050/details?lid=10看到返回商品对象，就说明接口成功！(5). 切换pool.js中的数据库连接信息: a. 解开pool.js中新浪云远程数据库的连接信息的注释b. 注释pool.js中的本地数据库的连接信息。(6). 在vscode中点左侧第三个源代码管理图标，进入源代码管理界面。输入本次修改的备注，点顶部对勾提交。(7). 在从新浪云克隆下载的文件夹中，打开cmd，运行git push origin master。提交本次修改到新浪云服务器。五. 将新浪云上的前端和后端联合起来
1. 前后端分离: (1). 前端vue项目和后端nodejs/java/python...项目，分别部署在两个服务器上，拥有各自独立的域名。(2). 为什么: 松耦合。任何一方更新，不影响另一方。任何一方出错，不过多影响另一方。(3). 今后几乎所有项目都是前后端分离的！(4). 前后端唯一的纽带: ajax请求(5). 问题: a. 跨域： 1). 在服务器端cors跨域: a. 安装一个模块: npm i -save corsb. 在app.js中，在所有接口地址配置之前: const cors=require("cors");... app.use(cors({      origin:[ //允许跨域的客户端源头有哪些'http://localhost:8080', //vue脚手架"http://127.0.0.1:5500", //live server"http://xzvue.applinzi.com" //新浪云上的vue项目],credentials:true //要求允许携带cookie}))2). http-proxy跨域：a. 只能在本地开发环境下使用！部署到新浪云，就不再起作用b. 将来在公司中，http-proxy需要结合专门的服务器端软件配置，比如ngix，才能启用http-proxy方式。2. 从本地的xzvue前端项目中请求本地xzserve2服务器端接口: (1). 修改pool.js中新浪云连接信息为本地连接信息(2). 重启服务器端程序(3). 在xzvue项目中配置axios: main.js: 中 import axios from "axios"axios.defaults.baseURL="http://localhost:5050"Vue.prototype.axios=axios;(4). 在页面中使用axios发送请求: src/views/Home.vue中:
<template><div class="home"><img alt="Vue logo" src="../assets/logo.png"><h1>我的第一个脚手架项目！</h1><h2>我的名字:{{uname}}</h2><ul><li v-for="(p,i) of products" :key="i">{{p.title}} | {{p.details}} | ¥{{p.price.toFixed(2)}}</li></ul></div>
</template><script>
export default {  data(){return {uname:"东东",products:[]}},
  mounted(){this.axios.get("/index").then(result=>{console.log(result.data);this.products=result.data;})}
}
</script><style>
.home>h1{background-color:red;color:yellow
}
</style>(4). 本地运行前端xzvue项目: npm run serve，按住ctrl点localhost:8080结果: 看到页面上显示6个商品的详细信息。
3. 部署带有cors跨域的xzserve2项目到服务器端:(1). 强调: 一定记得切换pool.js中本地连接信息为新浪云服务器的连接信息(2). 先在vscode中源代码管理界面提交本次修改，再在命令行中push到新浪云服务器。(3). 测试: 先在本地xzvue中，修改main.js中的基础路径为新浪云的路径
4. 部署带有axios请求的xzvue项目到新浪云服务器: (1). npm run build(2). 进入dist文件夹，将dist文件夹内部的所有文件打包为一个压缩包(3). 打开新浪云应用程序列表：https://sae.sinacloud.com/home/list(4). 点前端项目应用程序，比如: xzvue(5). 点"运行环境管理"->代码管理->在"版本列表"右侧点上传代码包(6). 将第二步创建的本地的压缩包拖拽到网页中方块区域内(7). 测试: 访问新浪云上的前端项目地址，比如: http://xzvue.applinzi.com结果: 看到显示出首页6个商品信息，就算正确。

#项目的编译和发布 #静态发布新浪云 #node服务器发布新浪云 #nodejs服务器部署数据库 #新浪云前后端结合相关推荐

RuoYi-Vue 部署 Linux环境若依前后端分离项目（jar包+nginx 单机版本）
文章目录一.软件安装部署 1. 安装jdk 2. mysql8安装部署 3. redis安装 4. nginx 安装部署 5. 克隆项目二.后端项目 2.1. 修改数据库连接 2.2. 修改Red ...
RuoYi-Vue 部署 Linux环境若依前后端分离项目（jar包+nginx 多机版本）
接上一篇:RuoYi-Vue 部署 Linux环境若依前后端分离项目(jar包+nginx 单机版本) 前端和后端不在一个服务器上,如何部署呢? 文章目录 1. 服务器和软件部署 2. 后端部署 3 ...
RuoYi-Vue 部署 Linux环境若依前后端分离项目（war 包+nginx版本）
文章目录一.软件安装部署 1. 安装jdk 2. mysql8安装部署 3. redis安装 4. nginx 安装部署 5. Tomcat10 下载和配置 Linux 环境 6. 克隆项目二.后 ...
(五)Debian Linux中部署Spring Boot + Vue的前后端分离项目详细过程(arm64/aarch64架构下)
专题系列往期文章目录 (一)移动端安卓手机改造成linux服务器&Linux中安装软件踩坑历险记 (二)Debian Linux系统中安装oracle JDK1.8详细过程(arm64/aar ...
实战react技术栈+express前后端博客项目（3）-- 后端路由、代理以及静态资源托管等配置说明...
项目地址:github.com/Nealyang/Re- 本想等项目做完再连载一波系列博客,随着开发的进行,也是的确遇到了不少坑,请教了不少人.遂想,何不一边记录踩坑,一边分享收获呢.分享当然是好的, ...
推荐3个快速开发平台前后端都有项目经验又有着落了
今日推荐推荐一款开源 Java 版的视频管理系统我是培训机构出身的程序员,不敢告诉任何人 14个项目经常性逛github,发现了一些优秀的开源项目,其中的框架及代码非常不错,现在给大家推荐三个快 ...
3个开源的快速开发平台，前后端都有，项目经验又有着落了！
来源:我是程序汪经常性逛github,发现了一些优秀的开源项目,其中的框架及代码非常不错,现在给大家推荐三个快速开发平台. 第一套系统:Jeecg-boot快速开发平台前端采用阿里的ant-des ...
vue+django前后端项目部署
一.python3的安装 1.安装python前的库环境: yum install gcc patch libffi-devel python-devel zlib-devel bzip2-devel ...
phython在file同时写入两个_喜大普奔，两个开源的 Spring Boot + Vue 前后端分离项目可以在线体验了
折腾了一周的域名备案昨天终于搞定了. 松哥第一时间想到赶紧把微人事和 V 部落部署上去,我知道很多小伙伴已经等不及了. 1. 也曾经上过线其实这两个项目当时刚做好的时候,我就把它们部署到服务器上了, ...

#项目的编译和发布 #静态发布新浪云 #node服务器发布新浪云 #nodejs服务器部署数据库 #新浪云前后端结合

#项目的编译和发布 #静态发布新浪云 #node服务器发布新浪云 #nodejs服务器部署数据库 #新浪云前后端结合相关推荐

最新文章

热门文章