图片资源导入方式

最新推荐文章于 2024-07-26 20:46:33 发布

我是你大爷的兄弟

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量1.1k

点赞数

文章标签： restful javascript 后端

本文链接：https://blog.csdn.net/zhongjiezhe169/article/details/124874088

版权

一、图片资源导入方式

放置在src目录下的图片资源有三种导入方式：

1、src的相对路径和@写法，

2、import写法

3、require写法

对于一张图片而言，我可以直接src引入相对路径，我还可以使用模块化的方式引入，无论是require，还是import都可以。

但这里记住，在模板中，背景图不可以使用相对路径直接引入，只能通过模块化方式引入，常见手法：

<template>
    <div>
        <img src="../assets/img.jpg" alt="">
        <img src="@/assets/logo.png" alt="">
        <img :src="img01" alt="">
        <img :src="img02" alt="">
        <div class="box"></div>
        <div class="box2" :style="{background:'url('+img01+')'}"></div>
        <div class="box2" :style="{background:'url('+img02+')'}"></div>
    </div>
</template>

<script>
import imgSrc from "@/assets/img.jpg"
export default {
    data () {
        return {
            img01:require("@/assets/logo.png"),
            img02:imgSrc,

        }
    }
}
</script>
 
<style lang = "less" scoped>
.box{
    width: 300px;
    height: 300px;
    background: url("../assets/img.jpg");
}
.box2{
    width: 300px;
    height: 300px;
}
</style>

二、Restful风格接口

Restful风格的API是一种软件架构风格，设计风格而不是标准，只是提供了一组设计原则和约束条件。它主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁，更有层次，更易于实现缓存等机制。

在Restful风格中，用户请求的url使用同一个url而用请求方式：get，post，delete，put…等方式对请求的处理方法进行区分，这样可以在前后台分离式的开发中使得前端开发人员不会对请求的资源地址产生混淆和大量的检查方法名的麻烦，形成一个统一的接口。

三、Axios与QS【熟悉】

在Vue和React等大型项目中，我们常用的数据请求方式，就是Axios。Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

官网地址：http://www.axios-js.com/

3.1、安装

npm i axios qs -S

// OR

yarn add axios qs

3.2、使用

* axios统一使用格式

axios.get(url[, config])
axios.post(url[, data[, config]])

// 直白一点表示：

axios
  .get(url, {
    params: {}
  })
  .then(res=>{})
  .catch(err=>{})

axios
  .post('/user', {})
  .then(res=>{})
  .catch(err=>{})

* qs使用

qs能将json格式转为 key=value 的格式。

具体用法：

const qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));

* qs.stringify与JSON.stringify的区别

qs.stringify()将对象序列化成URL的形式，以&进行拼接。JSON.stringify()是正常类型的JSON

var a = {name:'Lucy',age:10};
qs.stringify(a)
// 'name=Lucy&age=10'
JSON.stringify(a)
// '{"name":"Lucy","age":10}'

* 实际操作：

1、开启后端服务

打开 backend 目录，执行 npm i 命令，安装依赖成功后再执行 node server.js，到浏览器输入 http://localhost:8000 查看接口文档。

2、组件中发起请求：

发送get请求：

// get请求
axios.get("http://localhost:8000/getdata").then(res => {
  console.log(res);
});

// 上面的请求也可以这样做【以后我们都选用这种模式，方便后期做配置】
let qsObj = qs.stringify({
  num: 123
});
axios
  .post("http://localhost:8000/postdata", {
    data: qsObj
  })
  .then(res => {
    console.log(res);
  });

3、解决跨域

到此，发现跨域，解决方案是找到 vue.config.js :

module.exports = {
    devServer: {
        proxy: "http://localhost:8000"
    }
}

然后请求改写：

// get请求
axios.get("/getdata").then(res => {
  console.log(res);
});

// 上面的请求也可以这样做【以后我们都选用这种模式，方便后期做配置】
let qsObj = qs.stringify({
  num: 123
});
axios
  .post("/postdata", {
    data: qsObj
  })
  .then(res => {
    console.log(res);
  });

四、环境变量

我们实际开发中，往往有多种环境，如：

development 模式用于 vue-cli-service serve
production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
test 模式用于 vue-cli-service test:unit

甚至还有其他的，这里我们只讨论 development和production。

此处有几个要注意的点：

一个模式可以包含多个环境变量
每个模式都会将环境变量中 NODE_ENV 的值设置为模式的名称
可以通过为 .env 文件增加后缀来设置某个模式下特有的环境变量
为一个特定模式准备的环境文件 (例如 .env.production) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入，优先级高于.env和.env.local
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略，优先级高于.env和.env.local

一般环境变量文件都创建在根目录下，我们创建以下两份：

.env.dev 文件：

NODE_ENV=development
VUE_APP_BASE_URL=/

.env.prod 文件：

NODE_ENV = production
VUE_APP_BASE_URL = 'http://www.baidu.com'

注意：

NODE_ENV - 是 “development”、“production” 、"test"或者自定义的值。具体的值取决于应用运行的模式
BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径
除了 NODE_ENV 和 BASE_URL，其他的环境变量必须以 VUE_APP_ 开头
项目中使用：process.env.环境变量名，eg：VUE_APP_BASE_URL

我们到任意一个组件中：

console.log(process.env.NODE_ENV);				// development
console.log(process.env.VUE_APP_BASE_URL)	// /

通过在 package.json 中的 scripts 下，使用mode，我们可以切换环境：

{
  "scripts": {
    "serve": "vue-cli-service serve --open --port 3000 --mode prod",
    "build": "vue-cli-service build --modern"
  },
}

再到任意一个组件中：

console.log(process.env.NODE_ENV);				
console.log(process.env.VUE_APP_BASE_URL)

五、Git

Git是一个免费的开源分布式版本控制系统，它可以快速高效地处理从小型到大型的项目。简单点说就是：git分布式版本控制工具（管理代码版本）。我们常用的Git平台有：Gitee(码云)、GitLab、GitHub等。

1、下载Git

这里提供Git下载地址：https://git-scm.com/downloads

2、Gitee配置SSH公钥

注册（用邮箱注册），并登录到Gitee后，鼠标移至右上角头像，下拉选项中选择 设置
左侧菜单栏中选择SSH公钥，在右侧添加公钥
怎么生成本机的公钥？请查看：https://gitee.com/help/articles/4181

3、Git日常操作

克隆代码 （把远程仓库拉取到本地）：git clone 仓库地址

查看仓库状态: git status

提交工作区代码到暂存区： git add 文件路径或者**.(所有文件)**

**提交暂存区代码到历史记录区：**git commit -m ‘本次提交的信息提示’

**提交历史记录区的历史提交记录到远程仓库：**git push origin 分支名称

注意点

git提示的信息里面只要有fatal 或者error这两个词随便一个，都是执行git命令失败了

4、创建项目与分支

在gitee中创建项目(例如创建了 demo0630 这个项目)，执行以下命令：

// 克隆仓库到本地
git clone git@gitee.com:codesohigh/demo0630.git

// 检查当前分支
git branch

一般此时是master分支，但我们开发阶段一般用dev等其他分支，所以我们：

git checkout -b dev

// git checkout 命令加上 -b 参数，表示创建并切换，以上操作相当于：
git branch dev
git checkout dev

第一个注意的点：

在仓库没有初始化前，如果需要检查分支，一定要记住这句话：

未曾commit的仓库是无法检查分支的！

第二个注意点：

实际上git checkout 不是切换分支的最佳选择，我们使用git switch 会更好：
git switch -c dev   // 创建并切换到新的dev分支

git switch dev		// 切换到已有的dev分支

5、文件提交

创建 index.js 文件，随便写点内容，提交：

git add .
git commit -m '修改了index.js'
git push origin dev

此时你会发现，git checkout master 切回master分支后，index.js这份文件会消失，因为当前分支不存在这个文件。

6、分支合并

假设当前项目已经完成，我们想要把dev分支合并到master，可以在master分支下使用：

git merge dev

此时，你会看到，项目中又有 index.js 了。

7、版本回滚

使用 git switch -c dev1 创建新的dev1分支，稍微修改dev1中的index.js，并且提交到远程仓库。

我们提交完成后，发现自己不想用当前代码，想回滚到上一次的代码，怎么办呢？

// 查看当前项目提交过的所有版本（含所有分支的操作）
git log

// git log会出现很详细的信息，如果我们只想简单看看版本号，可以使用
git log --pretty=oneline

我们会得到：

b2ff1beb92bd3ac425dac2fa519d4b8191438be9 (HEAD -> dev1) '123456'
c9efd011b471765fc9fdd6eefaadf75b3b36153b (origin/dev1) '12345'
80f6cb77a9b13cd471b725b5ef66901150bf57bb '提交'
47d676dbf6d0687d76f059ee9ed044c4c378ed30 (origin/master, origin/HEAD) 'dev1的首次提交'
d5c756afd04abfdbc9bb2299064eab34b30ede5f (origin/dev, dev) '修改了index.js'
65f4c72f6c8e2c272d4e284c103e249c65ebff32 Initial commit

如果我们只想回滚到指定版本，可以使用：

git reset --hard c9efd

这里只需要写id号的前几个字母与数字就行，没必要全写，git会自动去检索。

但此时，我们再一次查看所有版本，发现：

c9efd011b471765fc9fdd6eefaadf75b3b36153b (origin/dev1) '12345'
80f6cb77a9b13cd471b725b5ef66901150bf57bb '提交'
47d676dbf6d0687d76f059ee9ed044c4c378ed30 (origin/master, origin/HEAD) 'dev1的首次提交'
d5c756afd04abfdbc9bb2299064eab34b30ede5f (origin/dev, dev) '修改了index.js'
65f4c72f6c8e2c272d4e284c103e249c65ebff32 Initial commit

最新写的那个丢失了。但我此时又后悔了，怎么办？

// 重新reset即可找回
git reset --hard b2ff1

现在，就可以退回最新版本了。

但这个方法前提是你当前这个控制台不曾关掉，如果已经关掉了，你是没法知道版本号的，这时候要怎么办呢？

// Git提供了一个命令git reflog用来记录你的每一次命令
git reflog

8、代码冲突

修改master的代码，执行：

git add .
git commit -m '提交master'

然后执行：

git merge dev

我们会发现，vscode提示代码冲突：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KUs2G08t-1652973554085)(assets/03.png)]

此时，我们只需要点击我们想要的选项，即可解决代码冲突。

我是你大爷的兄弟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片资源导入方式

一、图片资源导入方式放置在src目录下的图片资源有三种导入方式：1、src的相对路径和@写法，2、import写法3、require写法对于一张图片而言，我可以直接src引入相对路径，我还可以使用模块化的方式引入，无论是require，还是import都可以。但这里记住，在模板中，背景图不可以使用相对路径直接引入，只能通过模块化方式引入，常见手法：<template> <div> <img src="../assets/img.jpg" a
复制链接

扫一扫