2024年前端最全实战:node-react项目部署到服务器,GitHub标星3.2K

本文介绍了前端开发的基础知识,包括HTML内容构建、CSS样式设计、JavaScript实现动态交互,以及Vue框架的组件规范、项目目录结构和使用Vue-cli搭建。还涉及了宝塔服务器管理和数据库配置等内容。
摘要由CSDN通过智能技术生成

基础学习:

前端最基础的就是 HTML , CSS 和 JavaScript 。

网页设计:HTML和CSS基础知识的学习

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

动态交互:JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。

3、集成宝塔


①、安装

官网

安装对应版本

在这里插入图片描述在这里插入图片描述

②、开放宝塔端口8888

  1. 安全组配置

在这里插入图片描述

  1. 配置规则

在这里插入图片描述

  1. 手动添加

在这里插入图片描述

  1. 开放8888在这里插入图片描述在这里插入图片描述

  2. 外网可以通过IP:8888访问

如果报错服务器运行rm -f /www/server/panel/data/admin_path.pl关闭安全即可在这里插入图片描述

  1. 服务器通过bt命令,设置账号密码后登录在这里插入图片描述

③、注册登录宝塔

在这里插入图片描述

在这里插入图片描述

④、软件商店安装必要软件

在这里插入图片描述

4、本地文件打包上传


①、后台管理系统

将react后台管理系统进行打包yarn build后,将build中的静态资源放到服务器中的public文件夹下的manager文件夹,index.html放到views中的manager中

在这里插入图片描述

③、app.js中路由挂载路由,设置静态资源文件夹

在这里插入图片描述

④、所有内容打包压缩

在这里插入图片描述

⑤、宝塔网站添加站点

  1. 添加网站

在这里插入图片描述

  1. 创建网站,域名有的话写域名,没有的话写IP地址

在这里插入图片描述

  1. 创建成功后文件目录下创建对应文件夹

在这里插入图片描述

  1. 安全——端口放行

在这里插入图片描述

  1. 将文件在上传到对应目录

在这里插入图片描述

  1. 解压文件

在这里插入图片描述

⑥、数据库配置

  1. 将数据库转出为SQL语句,在服务器端上传

  2. 在这里插入图片描述

  3. 数据库配置——宝塔——添加数据库

在这里插入图片描述

4. 导入

在这里插入图片描述

5. 更改项目中对应数据库文件,与新创建数据库对应

Vue 编码基础

2.1.1. 组件规范

2.1.2. 模板中使用简单的表达式

2.1.3 指令都使用缩写形式

2.1.4 标签顺序保持一致

2.1.5 必须为 v-for 设置键值 key

2.1.6 v-show 与 v-if 选择

2.1.7 script 标签内部结构顺序

2.1.8 Vue Router 规范

Vue 项目目录规范

2.2.1 基础

2.2.2 使用 Vue-cli 脚手架

2.2.3 目录说明

2.2.4注释说明

2.2.5 其他

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

使用 Vue-cli 脚手架

2.2.3 目录说明

2.2.4注释说明

2.2.5 其他

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值