当前位置： 首页 > wzjs >正文

邯郸网站建设提供商驻马店百度seo

wzjs 2025/7/26 6:57:04
邯郸网站建设提供商,驻马店百度seo,网站开启gzip,做淘宝优惠券怎么有网站一、HTML、JS、CSS 1、环境准备 （1、）安装NVM （2、）检查NPM （3、）搭建简单服务 2、Fetch-API 二、框架 1、VUE2 (1、)环境准备 1、)安装脚手架 npm install -g vue/cli -g 参数表示全局安装&#xff…

一、HTML、JS、CSS

1、环境准备

（1、）安装NVM

（2、）检查NPM

（3、）搭建简单服务

2、Fetch-API

二、框架

1、VUE2

(1、)环境准备

1、)安装脚手架
npm install -g @vue/cli

  • -g 参数表示全局安装，这样在任意目录都可以使用 vue 脚本创建项目

2、)创建项目
vue ui

使用图形向导来创建 vue 项目，如下图，输入项目名

选择手动配置项目

添加 vue router 和 vuex

选择版本，创建项目

3、)安装 devtools

  • devtools 插件网址：Installation | Vue Devtools

4、)运行项目

进入项目目录，执行

npm run serve
5、)修改端口

前端服务器默认占用了 8080 端口，需要修改一下

  • 文档地址：DevServer | webpack

  • 打开 vue.config.js 添加

    const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({// ...devServer: {port: 7070}})
6、)添加代理

为了避免前后端服务器联调时， fetch、xhr 请求产生跨域问题，需要配置代理

  • 文档地址同上

  • 打开 vue.config.js 添加

    const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({// ...devServer: {port: 7070,proxy: {'/api': {target: 'http://localhost:8080',changeOrigin: true}}}})

2、VUE3

(1、)环境准备

1、）创建项目

采用 vite 作为前端项目的打包，构建工具

npm init vite@latest

按提示操作

cd 项目目录
npm install
npm run dev

2、）编码 IDE

推荐采用微软的 VSCode 作为开发工具，到它的官网 Visual Studio Code - Code Editing. Redefined 下载安装即可

要对 *.vue 做语法支持，还要安装一个 Volar 插件

3、）安装 devtools

  • devtools 插件网址：Installation | Vue Devtools

4、）修改端口

打开项目根目录下 vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
​
// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],server: {port: 7070}
})

  • 文档地址：配置 Vite {#configuring-vite} | Vite中文网 (vitejs.cn)

5、）配置代理

为了避免前后端服务器联调时， fetch、xhr 请求产生跨域问题，需要配置代理，同样是修改项目根目录下 vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
​
// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],server: {port: 7070,proxy: {'/api': {target: 'http://localhost:8080',changeOrigin: true}}}
})

  • 文档地址：配置 Vite {#configuring-vite} | Vite中文网 (vitejs.cn)

3、REACT

（1、) 环境准备

1、）创建项目

首先，通过 react 脚手架创建项目

npx create-react-app client --template typescript

  • client 是项目名

  • 目前 react 版本是 18.x

2、）运行项目
cd client
npm start

  • 会自动打开浏览器，默认监听 3000 端口

3、）修改端口

在项目根目录下新建文件 .env.development，它可以定义开发环境下的环境变量

PORT=7070

重启项目，端口就变成了 7070

  • 参考文档：Advanced Configuration | Create React App (create-react-app.dev)

4、）浏览器插件

插件地址 New React Developer Tools – React Blog (reactjs.org)

VSCode

推荐安装 Prettier 代码格式化插件

三、组件库

1、Element-UI

2、Ant Design

(1、)react 组件库

  • 官网地址：Ant Design - The world's second most popular React UI framework

  • 镜像地址1：Ant Design - The world's second most popular React UI framework

  • 镜像地址2：Ant Design - The world's second most popular React UI framework

(2、)安装

npm install antd

  • 目前版本是 4.x

引入样式，在 css 文件中加入

@import '~antd/dist/antd.css';

引入 antd 组件

import { Button } from "antd";
​
export default function A1() {return <Button type='primary'>按钮</Button>
}

(3、)国际化

试试其它组件

import { Button, Modal } from "antd";
​
export default function A1() {return <Modal open={true} title='对话框'>内容</Modal>
}

发现确定和取消按钮是英文的，这是因为 antd 支持多种语言，而默认语言是英文

要想改为中文，建议修改最外层的组件 index.tsx

// ...
import { ConfigProvider } from 'antd'
import zhCN from 'antd/es/locale/zh_CN'
​
root.render(<ConfigProvider locale={zhCN}><A1></A1></ConfigProvider>
)

四、扩展

1、跨域问题

(1、)后端解决

@CrossOrigin(“允许路径”)

(2、)前端解决（代理）

2、TypeScript

（1、）环境准备

1、）安装 typescript 编译器

npm install -g typescript

2、）编写 ts 代码

function hello(msg: string) {console.log(msg)
}
​
hello('hello,world')

3、）执行 tsc 编译命令

tsc xxx.ts

4、）编译生成 js 代码，编译后进行了类型擦除

function hello(msg) {console.log(msg);
}
hello('hello,world');

5、）再来一个例子，用 interface 定义用户类型

interface User {name: string,age: number
}
​
function test(u: User): void {console.log(u.name)console.log(u.age)
}
​
test({ name: 'zhangs', age: 18 })

6、）编译后

function test(u) {console.log(u.name);console.log(u.age);
}
test({ name: 'zhangs', age: 18 });

可见，typescript 属于编译时实施类型检查（静态类型）的技术

五、数据共享工具

1、VUEX

2、PINIA

3、MOBX

(1、)文档

  • MobX 中文文档

  • MobX 官方文档

(2、)安装

npm install mobx mobx-react-lite

  • mobx 目前版本是 6.x

  • mobx-react-lite 目前版本是 3.x

(3、)名词

Action, State, View

  • Actions 用来修改状态数据的方法

  • Observable state 状态数据，可观察

  • Derived values 派生值，也叫 Computed values 计算值，会根据状态数据的改变而改变，具有缓存功能

  • Reactions 状态数据发生变化后要执行的操作，如 react 函数组件被重新渲染

(4、)使用

首先，定义一个在函数之外存储状态数据的 store，它与 useState 不同：

  • useState 里的状态数据是存储在每个组件节点上，不同组件之间没法共享

  • 而 MobX 的 store 就是一个普通 js 对象，只要保证多个组件都访问此对象即可

import axios from 'axios'
import { makeAutoObservable } from 'mobx'
import { R, Student } from '../model/Student'
​
class StudentStore {student: Student = { name: '' }
​constructor() {makeAutoObservable(this)}
​async fetch(id: number) {const resp = await axios.get<R<Student>>(`http://localhost:8080/api/students/${id}`)runInAction(() => {this.student = resp.data.data})}get print() {const first = this.student.name.charAt(0)if (this.student.sex === '男') {return first.concat('大侠')} else if (this.student.sex === '女') {return first.concat('女侠')} else {return ''}} 
}
​
export default new StudentStore()

其中 makeAutoObservable 会

  • 将对象的属性 student 变成 Observable state，即状态数据

  • 将对象的方法 fetch 变成 Action，即修改数据的方法

  • 将 get 方法变成 Computed values

在异步操作里为状态属性赋值，需要放在 runInAction 里，否则会有警告错误

使用 store，所有使用 store 的组件，为了感知状态数据的变化，需要用 observer 包装，对应着图中 reactions

import Search from 'antd/lib/input/Search'
import { observer } from 'mobx-react-lite'
import studentStore from '../store/StudentStore'
import A71 from './A71'
import Test2 from './Test2'
​
const A7 = () => {return (<div><Searchplaceholder='input search text'onSearch={(v) => studentStore.fetch(Number(v))}style={{ width: 100 }}/><h3>组件0 {studentStore.student.name}</h3><A71></A71><A72></A72></div>)
}
​
export default observer(A7)

其它组件

import { observer } from 'mobx-react-lite'
import studentStore from '../store/StudentStore'
​
const A71 = () =>{return <h3 style={{color:'red'}}>组件1 {studentStore.student.name}</h3>
}
​
export default observer(A71)

import { observer } from 'mobx-react-lite'
import studentStore from '../store/StudentStore'
​
const A72 = () =>{return <h3 style={{color:'red'}}>组件1 {studentStore.student.name}</h3>
}
​
export default observer(A72)

(5、)注解方式

import { R, Student } from "../model/Student";
import { action, computed, makeAutoObservable, makeObservable, observable, runInAction } from 'mobx'
import axios from "axios";
​
class StudentStore {// 属性 - 对应状态数据 observable state@observable student: Student = { id: 0, name: '' }// 方法 - 对应 action 方法@action setName(name: string) {this.student.name = name}@action async fetch(id: number) {const resp = await axios.get<R<Student>>(`http://localhost:8080/api/students/${id}`)runInAction(() => {this.student = resp.data.data})}// get 方法 - 对应 derived value@computed get displayName() {const first = this.student.name.charAt(0)if (this.student.sex === '男') {return first + '大侠'} else if (this.student.sex === '女') {return first + '女侠'} else {return ''}}// 构造器constructor() {makeObservable(this)}
}
​
export default new StudentStore()

需要在 tsconifg.json 中加入配置

{"compilerOptions": {// ..."experimentalDecorators": true}
}

六、Router

1、Vue Router

2、React Router

(1、)安装

npm install react-router-dom

  • 目前版本是 6.x

(2、)使用

新建文件 src/router/router.tsx

import { lazy } from 'react'
import { Navigate, RouteObject, useRoutes } from 'react-router-dom'
​
export function load(name: string) {const Page = lazy(() => import(`../pages/${name}`))return <Page></Page>
}
​
const staticRoutes: RouteObject[] = [{ path: '/login', element: load('A8Login') },{path: '/',element: load('A8Main'),children: [{ path: 'student', element: load('A8MainStudent') },{ path: 'teacher', element: load('A8MainTeacher') },{ path: 'user', element: load('A8MainUser') }],},{ path: '/404', element: load('A8Notfound') },{ path: '/*', element: <Navigate to={'/404'}></Navigate> },
]
​
export default function Router() {return useRoutes(staticRoutes)
}

index.tsx 修改为

import ReactDOM from 'react-dom/client';
import './index.css';
import { ConfigProvider } from 'antd';
import zhCN from 'antd/es/locale/zh_CN'
​
import { BrowserRouter } from 'react-router-dom';
import Router from './router/router';
​
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement
);
​
root.render(<ConfigProvider locale={zhCN}><BrowserRouter><Router></Router></BrowserRouter></ConfigProvider>  
)

A8Main 的代码

import { Layout } from "antd";
import { Link, Outlet } from "react-router-dom";
​
export default function A8Main () {  return <Layout><Layout.Header>头部导航</Layout.Header><Layout><Layout.Sider>侧边导航<Link to='/student'>学生管理</Link><Link to='/teacher'>教师管理</Link><Link to='/user'>用户管理</Link></Layout.Sider><Layout.Content><Outlet></Outlet></Layout.Content></Layout></Layout>
}

  1. Navigate 的作用是重定向

  2. load 方法的作用是懒加载组件，更重要的是根据字符串找到真正的组件，这是动态路由所需要的

  3. children 来进行嵌套路由映射，嵌套路由在跳转后，并不是替换整个页面，而是用新页面替换父页面的 Outlet 部分

(3、)动态路由

路由分成两部分：

  • 静态路由，固定的部分，如主页、404、login 这几个页面

  • 动态路由，变化的部分，经常是主页内的嵌套路由，比如 Student、Teacher 这些

动态路由应该是根据用户登录后，根据角色的不同，从后端服务获取，因为这些数据是变化的，所以用 mobx 来管理

import axios from 'axios'
import { makeAutoObservable, runInAction } from 'mobx'
import { Navigate, RouteObject } from 'react-router-dom'
import { MenuAndRoute, R, Route } from '../model/Student'
import { load } from '../router/MyRouter'
​
class RoutesStore {dynamicRoutes: Route[]
​async fetch(username: string) {const resp = await axios.get<R<MenuAndRoute>>(`http://localhost:8080/api/menu/${username}`)runInAction(() => {this.dynamicRoutes = resp.data.data.routeListlocalStorage.setItem('dynamicRoutes', JSON.stringify(this.dynamicRoutes))})}
​constructor() {makeAutoObservable(this)const r = localStorage.getItem('dynamicRoutes')this.dynamicRoutes = r ? JSON.parse(r) : []}
​reset() {this.dynamicRoutes = []localStorage.removeItem('dynamicRoutes')}
​get routes() {const staticRoutes: RouteObject[] = [{ path: '/login', element: load('A8Login') },{ path: '/', element: load('A8Main') },{ path: '/404', element: load('A8Notfound') },{ path: '/*', element: <Navigate to={'/404'}></Navigate> },]const main = staticRoutes[1]
​main.children = this.dynamicRoutes.map((r) => {console.log(r.path, r.element)return {path: r.path,element: load(r.element),}})return staticRoutes}
}
​
export default new RoutesStore()

  • 其中用 localStorage 进行了数据的持久化，避免刷新后丢失数据

MyRouter 文件修改为

import { observer } from 'mobx-react-lite'
import { lazy } from 'react'
import { Navigate, RouteObject, useRoutes } from 'react-router-dom'
import RoutesStore from '../store/RoutesStore'
​
// 把字符串组件 => 组件标签
export function load(name: string) {// A8Loginconst Page = lazy(() => import(`../pages/${name}`))return <Page></Page>
}
​
// 路由对象
function MyRouter() {  const router = useRoutes(RoutesStore.routes)return router
}
​
export default observer(MyRouter)

注意导入 router 对象时，用 observer 做了包装，这样能够在 store 发生变化时重建 router 对象

http://www.dtcms.com/wzjs/97496.html

相关文章：

  • 计算机机应用网站建设与维护宁波网站推广排名
  • 建设一个类似于猪八戒的网站需要大丰seo排名
  • 网站如何提高权重网络推广的平台
  • 做网站应该会什么问题引流推广
  • 网站优化名词解释营业推广方式
  • 商务网站开发与建设论文网络营销项目策划书
  • 建行移动门户网站兰蔻搜索引擎营销案例
  • 纯静态网站模板青岛官网优化
  • 科技感的网站微信广告平台
  • 手机版网站设计案例网站链接交易
  • 怎样制作网站建设规划图免费个人自助建站
  • 想开个网站卖衣服的怎么做百度登录首页
  • 湘潭网站建设设计个人免费开发app
  • 广州网站制作功能新闻发布会
  • dsicuz做的网站国家免费职业技能培训
  • 北塘网站制作seo职业培训班
  • WordPress挂在虚拟站点百度建站多少钱
  • 网站域名注册哪个好windows优化大师下载安装
  • 给做网站公司写锦旗语美国搜索引擎浏览器
  • 网络游戏开发商网站seo报价
  • 做网站服务关键词排名批量查询软件
  • dw制作网站模板网站优化建设
  • 做古玩生意哪些网站好南宁网站建设网络公司
  • 重庆专业做网站新的网络推广方式
  • 软装公司排名前十强seo推广软件哪个好
  • 可靠的铁岭做网站公司西安网站制作价格
  • 微信后台网站建设家庭优化大师
  • 网站建设与管理专业app开发定制
  • 微信小程序怎么制作游戏湖南有实力seo优化
  • 澳大利亚网站设计开鲁网站seo免费版