前端入门知识（二）

最新推荐文章于 2022-04-22 20:57:57 发布

俺是编程侠

最新推荐文章于 2022-04-22 20:57:57 发布

阅读量258

点赞数 1

分类专栏：前端入门

本文链接：https://blog.csdn.net/qq_22091941/article/details/109303830

版权

前端入门专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前端入门知识（二）

前端开发流程

在分离之后的前端开发，首先要解决两个问题：页面预览问题（pc端和手机端预览）和接口跨域问题

一、页面预览问题

直接用浏览器打开.html文档,这个url的路径类似于 file:///D:/myDemo/backbonejs/index.html，这个属于绝对路径。代码如下
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello world</h1>
</body>
</html>
```
缺点是：只适合在自己的电脑pc端调试，很难在其他人电脑或者手机端进行频繁的调试（在开发中有可能会遇到，你自己是mac电脑，但是有兼容ie版本，那么你需要在windows系统的ie浏览器开发，但是我又需要在我的mac电脑上开发，这就需要一个可以共享的url）
在本地起一个服务，把html,js,css,image等文件作为静态文件进行托管
1. http-server:https://github.com/http-party/http-server, 安装完成之后，执行http-server ./,这就把当前的文件夹作为静态托管的根目录，这个是在全局安装的，可以在任何地方使用
```
[D:\myDemo\backbonejs]$ http-server ./
Starting up http-server, serving ./
Available on:
  http://192.168.2.135:8080
  http://127.0.0.1:8080
Hit CTRL-C to stop the server
```
  在本地预览可以用 http://127.0.0.1:8080,如果在手机或其他电脑上调试，就可以用http://192.168.2.135:8080(前提是：都是在同一个网段)，比较适合静态页面的单功能开发和调试
2. node托管（express，koa等）
```
const express = require("express");
const app = express();
app.use(express.static('./'))

app.listen(3000, () => {
    console.log('监听端口3000中...')
})
```
  与express为例子，先安装 npm install express，新建一个server.js,代码如上，然后执行node server.js，效果跟http-server一个，只是变了一下端口,这个是可以作为项目上线的静态托管的
3. nginx托管：nginx的功能太强大，作为静态托管当然是没有问题的，只有在server里面添加
```
location /{
    root: file:///D:/myDemo/backbonej;
    Index index.html index.htm;
}
```
  root是对应的绝对路径，根据代码情况修改就行了，然后重启，在前端开发时候，并不是很灵活，一般用于线上页面托管。

二、跨域问题

跨域问题：浏览器为了安全性，设置了同源策略，url的协议，域名，端口，有一个不同，就会出现跨域问题，我们使用Ajax时候不能进行访问，解决办法：
1. ```
使用设置响应头允许跨域：结合后台，设置：Access-Control-Allow-Origin，需要后台配合，不是很爽。
```
2. 使用jsonp解决网站跨域：利用script标签的可跨域性
```
<script>
    function fuc(data){
         console.log(data.name);       
    }
</script>
<script src="http://xxx/api.php?callback=fuc"></script> 
```
  这种方式只能get方式，而且如果报错了，是没有响应的，所以往往用定时器来判断接口是否出错。
3. nginx配置
```
location /api/ {
    proxy_pass http://127.0.0.1:3000; //接口地址
}
```
  nginx做转发，线上经常使用的方法
4. node转发http-proxy-middleware，https://github.com/chimurai/http-proxy-middleware，这种方式用的比较多，比较灵活，原理是在服务层进行http转发

三、webpack.devServer

结合了本地的服务和代理，还有热更新，适合在本地开发

https://webpack.docschina.org/configuration/dev-server/#root

俺是编程侠

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
前端入门知识（二）

前端入门知识（二）前端开发流程在分离之后的前端开发，首先要解决两个问题：页面预览问题（pc端和手机端预览）和接口跨域问题一、页面预览问题直接用浏览器打开.html文档,这个url的路径类似于file:///D:/myDemo/backbonejs/index.html，这个属于绝对路径。代码如下 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> .
复制链接

扫一扫