使用Vue开发自己的Chrome扩展程序过程详解

前言

浏览器扩展程序是可以修改和增强 Web 浏览器功能的小程序。它们可用于各种任务，例如阻止广告，管理密码，组织标签，改变网页的外观和行为等等。

好消息是浏览器扩展并不难写。可以用你已经熟悉的 Web 技术（HTML、CSS 和 JavaScript）创建 —— 就像普通网页一样。但是与网页不同的是，扩展程序可以访问许多特定于浏览器的 API，这才是有趣的地方。

在本教程中，我将向你展示如何为 Chrome 构建一个能够改变新标签页行为的简单扩展。这个扩展程序的 JavaScript 部分，我将使用 Vue.js 框架，因为它将允许我们快速启动并运行，而且用 vue 工作是很有趣的。

本教程的代码可以在GitHub上找到

Chrome 扩展程序的基础知识

Chrome扩展程序的核心部分是 manifest 文件 和后台脚本。manifest 文件采用JSON格式，提供有关扩展的重要信息，例如其版本、资源或所需的权限。后台脚本允许扩展对特定的浏览器事件做出反应，例如创建新选项卡。

为了演示这些概念，让我们先写一个“Hello，World！” Chrome 扩展。

创建一个名为 hello-world-chrome 的新文件夹和两个文件：manifest.json 和 background.js：

mkdir hello-world-chrome
cd hello-world-chrome
touch manifest.json background.js

打开 manifest.json 并添加以下代码：

{
"name": "Hello World Extension",
"version": "0.0.1",
"manifest_version": 2,
"background": {
"scripts": ["background.js"],
"persistent": false
}
}

name、version 和 manifest_version 都是必填字段。 name 和 version 字段可以是你想要的任何内容; manifest version 应设置为2（从Chrome 18开始）。

background 允许我们注册一个后台脚本， 在scripts 后面的数组中列出。除非扩展需要用 chrome.webRequest API来阻止或修改网络请求，否则 persistent 键应设置为 false。

将以下代码添加到 background.js ，使浏览器在安装扩展时弹出出 hello 对话框：

chrome.runtime.onInstalled.addListener(() => {
alert('Hello, World!');
});

最后安装扩展程序。打开 Chrome 并在地址栏中输入 chrome://extensions/。你应该看到一个显示已安装扩展程序的页面。
由于我们要从文件（而不是Chrome网上应用店）安装自己的扩展程序，因此需要使用页面右上角的切换按钮来激活开发者模式。

这应该添加一个额外的菜单栏，其中包含 Load unpacked选项。单击此按钮并选择你之前创建的 hello-world-chrome 文件夹。单击打开，应该能够看到已安装的扩展，并弹出“Hello，World！”窗口。

恭喜！你刚刚制作了一个 Chrome 扩展程序。

覆盖 Chrome 的新标签页

为了在打开新选项卡时迎接我们的是自己的扩展程序。可以通过使用 Override Pages API 来完成此操作。

注意：在你取得进展之前，请务必停用其他能够覆盖 Chrome 新标签页的扩展程序。一次只允许一个扩展改变这种行为。

首先创建一个要显示的页面，而不是新的标签页。我们称之为 tab.html。它应该与清单文件和后台脚本位于同一文件夹中：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My New Tab Page!</title>
</head>
<body>
<h1>My New Tab Page!</h1>
<p>You can put any content here you like</p>
</body>
</html>

接下来需要让扩展知道页面的存在。可以通过在清单文件中指定 chrome_url_overrides 来实现，如下所示：

"chrome_url_overrides": {
"newtab": "tab.html"
}

最后，你需要重新加载扩展才能使更改生效。你可以通过在 Chrome 的扩展程序页面上单击 Hello World 扩展程序的 reload 图标来执行此操作。

现在，当你打开新标签页时，你的自定义消息会出现。

将Vue添加到扩展

现在我们有一个非常基本的扩展，接下来要实现剩下的需功能了。当用户打开新标签页时，我希望扩展能够：

  • 从精彩的笑话网站 icanhazdadjoke.com 获取一个笑话。
  • 以良好的格式向用户显示该笑话。
  • 显示用户喜欢该笑话的按钮。这样可以把笑话保存到 chrome.storage。
  • 显示一个按钮，供用户查看已收藏的笑话。

当然你也可以用纯 JavaScript 或像 jQuery 这样的库来完成所有这些 —— 你开心就好！

但是出于本教程的目的，我将用 Vue 和令人敬畏的 vue-web-extension 样板来实现此功能。

用 Vue 可以让我又快又好地编写更有条理的代码。正如我们所看到的，样板文件提供了几个脚本，可以在构建 Chrome 扩展程序时解决一些痛苦的常见任务（例如：每当你进行更改时都必须重新加载扩展程序）。

vue-web-extension-boilerplate

本节假定你的计算机上安装了 Node 和 npm。如果不是这样，你可以到 nodejs.org/en/ 获取相关二进制文件，或者你可以使用版本管理器。我建议使用版本管理器。

我们还需要安装 Vue CLI 和 @vue/cli-init package：

npm install -g @vue/cli
npm install -g @vue/cli-init

完成后，让我们得到样板的副本：

vue init kocal/vue-web-extension new-tab-page

这将打开一个向导，询问你一堆问题。为了保证本教程的重点，我把回答列出来：

? Project name new-tab-page
? Project description A Vue.js web extension
? Author James Hibbard <jim@example.com>
? License MIT
? Use Mozilla's web-extension polyfill? No
? Provide an options page? No
? Install vue-router? No
? Install vuex? No
? Install axios? Yes
? Install ESLint? No
? Install Prettier? No
? Automatically install dependencies? npm

你可以根据自己的喜好调整答案，但是你一定要安装 axios。我们会用它来获取笑话。

接下来，切换到项目目录并安装依赖项：

cd new-tab-page
npm install

然后就可以用样板提供的脚本构建我们的新扩展了：

npm run watch:dev

这会将扩展构建到项目根目录中的 dist 文件夹中，来进行开发并监视更改。

要将扩展程序添加到 Chrome，请执行上述相同的步骤，要选择 dist 文件夹作为扩展程序目录。如果一切按计划进行，那么当扩展程序初始化时，你应该看到“Hello world！”消息。

项目设置

让我们花一点时间来看看样板给了我们些什么。当前文件夹结构应如下所示：

.
├── dist
│ └── <the built extension>
├── node_modules
│ └── <one or two files and folders>
├── package.json
├── package-lock.json
├── scripts
│ ├── build-zip.js
│ └── remove-evals.js
├── src
│ ├── background.js
│ ├── icons
│ │ ├── icon_128.png
│ │ ├── icon_48.png
│ │ └── icon.xcf
│ ├── manifest.json
│ └── popup
│ ├── App.vue
│ ├── popup.html
│ └── popup.js
└── webpack.config.js

在项目根目录中可以看到，样板文件正在使用 webpack。这很好，因为这为我们的后台脚本提供了 Hot Module Reloading。

src文件夹包含我们将用于扩展的所有文件。manifest 文件和 background.js 对于我们来说是熟悉的，但也要注意包含Vue 组件的 popup 文件夹。当样板文件将扩展构建到 dist 文件夹中时，它将通过 vue-loader 管理所有 .vue 文件并输出一个浏览器可以理解的 JavaScript 包。

在 src 文件夹中还有一个 icons 文件夹。如果你看一眼 Chrome 的工具栏，会看到我们的扩展程序的新图标（也被称为 browser action）。这就是从此文件夹中拿到的。如果单击它，你应该会看到一个弹出窗口，显示“Hello world！” 这是由 popup/App.vue 创建的。

最后，请注 scripts 文件夹的两个脚本：一个用于删除 eval 用法以符合 Chrome Web Store 的内容安全策略，另一个用于当你要把扩展上传到Chrome Web Store时将其打包到 .zip 文件中，。

在 package.json 文件中还声明了各种脚本。我们将用 npm run watch:dev 来开发扩展，然后使用 npm run build-zip 生成一个ZIP文件以上传到 Chrome Web Store。

在新标签页中使用 Vue 组件

首先从 background.js 中删除烦人的 alert 语句。

在 src 文件夹中创建一个新的 tab 文件夹来存放新标签页的代码。我们将在这个新文件夹中添加三个文件 —— App.vue，tab.html， tab.js：

mkdir src/tab
touch src/tab/{App.vue,tab.html,tab.js}

打开 tab.html 并添加以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>New Tab Page</title>
<link rel="stylesheet" href="tab.css" rel="external nofollow" >
</head>
<body>
<div id="app"></div>
<script src="tab.js"></script>
</body>
</html>

这里没什么特别的。这是一个简单的 HTML 页面，它将保存我们的 Vue 实例。

接下来在 tab.js 中添加：

import Vue from 'vue';
import App from './App';
new Vue({
el: '#app',
render: h => h(App)
});

在这里导入 Vue，用它为元素传递一个选择器，然后告诉它渲染 App 组件。

最后在 App.vue 中写如下代码：

<template>
<p>{{ message }}</p>
</template>
<script>
export default {
data () {
return {
message: "My new tab page"
}
}
}
</script>
<style scoped>
p {
font-size: 20px;
}
</style>

在使用这个新标签页之前，我们需要更新 manifest 文件：

{
"name":"new-tab-page",
...
"chrome_url_overrides": {
"newtab": "tab/tab.html"
}
}

为了使它们可用于扩展，我们还需要让样板编译我们的文件并复制到 dist 文件夹。

像下面这样修改 webpack.config.js，更新entry和plugins键：

entry: {
'background': './background.js',
'popup/popup': './popup/popup.js',
'tab/tab': './tab/tab.js'
}
plugins: [
...
new CopyWebpackPlugin([
{ from: 'icons', to: 'icons', ignore: ['icon.xcf'] },
{ from: 'popup/popup.html', to: 'popup/popup.html', transform: transformHtml },
{ from: 'tab/tab.html', to: 'tab/tab.html', transform: transformHtml },
...
})

你需要重新启动 npm run watch:dev 任务才能使这些更改生效。完成此操作后，重新加载扩展程序并打开新选项卡。你应该会看到“My new tab page”。

获取并显示笑话

好的，我们已经覆盖了 Chrome 的新标签页，并且将其替换为了 mini Vue app。但是我们要做的不仅仅是显示一条消息。

更改 src/tab/App.vue 中的模板部分如下：

<template>
<div>
<div v-if="loading">
<p>Loading...</p>
</div>
<div v-else>
<p class="joke">{{ joke }}</p>
</div>
</div>
</template>

将 <script> 部分更改为如下代码：

<script>
import axios from 'axios';
export default {
data () {
return {
loading: true,
joke: "",
}
},
mounted() {
axios.get(
"https://icanhazdadjoke.com/",
{ 'headers': { 'Accept': 'application/json' } }
)
.then(res => {
this.joke = res.data.joke
this.loading = false;
});
}
}
</script>

最后，将 <style> 部分更改为如下代码：

<style>
body {
height: 98vh;
text-align: center;
color: #353638;
font-size: 22px;
line-height: 30px;
font-family: Merriweather,Georgia,serif;
background-size: 200px;
display: flex;
align-items: center;
justify-content: center;
}
.joke {
max-width: 800px;
}
</style>

如果你正在运行 npm run watch:dev 任务，则扩展程序会自动重新加载，并且每当你打开新标签页时都会看到一个笑话。

接下来花点时间来了解一下自己都做了些什么。

在模板中，我们使用 v-if 块来显示加载消息或笑话，具体取决于 loading 的状态。最初它被设置为 true（显示加载消息），然后我们的脚本将触发 Ajax 请求来检索笑话。一旦 Ajax 请求完成，loading 属性将被设置为 false，导致组件被重新渲染并显示笑话。

在 <script> 部分，我们导入了 axios，然后声明了几个数据属性——前面提到的 loading 属性和一个 joke 属性来保存这个笑话。然后使用了 mount 生命周期钩子，一旦我们的 Vue 实例被挂载就会触发，向 joke API 发出 Ajax 请求。请求完成后，更新两个数据属性使组件重新渲染。

到目前为止还挺好。

将笑话持持久化到 Chrome Storage

接下来，添加一些能够让用户喜欢一个笑话和列出喜欢的笑话列表的按钮。由于我们将使用 Chrome's storage API 来保存这些笑话，所以可能需要添加第三个按钮来删除 storage 中的笑话。
将按钮添加到 v-else 块：

<div v-else>
<p class="joke">{{ joke }}</p>
<button @click="likeJoke" :disabled="likeButtonDisabled">Like Joke</button>
<button @click="logJokes" class="btn">Log Jokes</button>
<button @click="clearStorage" class="btn">Clear Storage</button>
</div>

没有什么令人兴奋的东西了。请注意我们将类似按钮的 disabled 属性绑定到 Vue 实例上的数据属性来确定其状态。这是因为用户不应该多次喜欢一个笑话。
接下来，将 click handler 和 Like Button Disabled 添加到脚本部分：

export default {
data () {
return {
loading: true,
joke: "",
likeButtonDisabled: false
}
},
methods: {
likeJoke(){
chrome.storage.local.get("jokes", (res) => {
if(!res.jokes) res.jokes = [];
res.jokes.push(this.joke)
chrome.storage.local.set(res);
this.likeButtonDisabled = true;
});
},
logJokes(){
chrome.storage.local.get("jokes", (res) => {
if(res.jokes) res.jokes.map(joke => console.log(joke))
});
},
clearStorage(){
chrome.storage.local.clear();
}
},
mounted() { ... }
}

在这里，我们声明了三个新方法来处理这三个新按钮。

likeJoke 方法在 Chrome 的存储中查找 jokes 属性。如果它不存在（也就是说，用户尚未喜欢一个笑话），会将其初始化为空数组。然后它将当前的笑话推送到此数组并将其保存到 storage。最后，将 likeButtonDisabled 数据属性设置为 true，并禁用 like 按钮。

logJokes 方法还在 Chrome storage 中查找 jokes 属性。如果找到了，会遍历其所有条目并将它们输出到控制台。

clearStorage 方法负责清除数据。

继续在扩展中调整这个新功能，直到自己满意。

为扩展做一些美化

它能够工作了，但是按钮是很丑，页面也有点简单。下面就要给扩展做一些润色。

下一步，安装 vue-awesome 库。它能够使我们在页面上使用 Font Awesome 图标，并使这些按钮看起来更漂亮一些：

npm install vue-awesome

在 src/tab/tab.js 中对库进行注册：

import Vue from 'vue';
import App from './App';
import "vue-awesome/icons";
import Icon from "vue-awesome/components/Icon";
Vue.component("icon", Icon);
new Vue({
el: '#app',
render: h => h(App)
});

修改模板：

<template>
<div>
<div v-if="loading" class="centered">
<p>Loading...</p>
</div>
<div v-else>
<p class="joke">{{ joke }}</p>
<div class="button-container">
<button @click="likeJoke" :disabled="likeButtonDisabled" class="btn"><icon name="thumbs-up"></icon></button>
<button @click="logJokes" class="btn"><icon name="list"></icon></button>
<button @click="clearStorage" class="btn"><icon name="trash"></icon></button>
</div>
</div>
</div>
</template>

最后，让我们为按钮添加更多样式，并添加一张图片：

<style>
body {
height: 98vh;
text-align: center;
color: #353638;
font-size: 22px;
line-height: 30px;
font-family: Merriweather,Georgia,serif;
background: url("https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2018/12/1544189726troll-dad.png") no-repeat 1% 99%;
background-size: 200px;
display: flex;
align-items: center;
justify-content: center;
}
.joke {
max-width: 800px;
}
.button-container {
position: absolute;
right: 0px;
top: calc(50% - 74px);
}
.btn {
background-color: #D8D8D8;
border: none;
color: white;
padding: 12px 16px;
font-size: 16px;
cursor: pointer;
display: block;
margin-bottom: 5px;
width: 50px;
}
.btn:hover {
background-color: #C8C8C8;
}
.btn:disabled {
background-color: #909090;
}
</style>

重新加载扩展并打开一个新标签，你应该看到这样的东西。

将扩展程序上传到 Chrome Web Store

如果想让其他人也可以使用你的扩展程序，可以通过 Chrome Web Store 做到。

首先你需要有一个 Google 帐户，可以用该帐户登录 Developer Dashboard 。系统会提示你输入开发人员详细信息，在发布第一个应用程序之前，你必须支付 5 美元的开发人员注册费（通过信用卡）。

接下来，你需要为自己的应用创建一个 ZIP 文件。你可以通过 npm run build-zip 在本地执行这项操作。这会在项目根目录中创建一个名为 dist-zip 的文件夹，其中包含准备上传到 Web Store 的 ZIP 文件。

对于简单的小扩展，这就够了。但是，在你上传自己的扩展之前，请务必阅读官方 Publish in the Chrome Web Store 指南。

总结

在本教程中，我重点介绍了 Chrome 扩展程序的主要部分，并展示了如何用在 Vue.js 中 vue-web-extension 样板构建扩展程序，最后讲解了如何将扩展上传到 Web Store。

希望你喜欢本教程，并用它指导你始构建自己的 Chrome 扩展。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解mpvue中小程序自定义导航组件开发指南

    这篇笔记主要记录一下基于mpvue的小程序中实现自定义导航的思路及应用.分享出来抛砖引玉,如有谬误或优化空间,欢迎交流. 小程序的配置项navigationStyle设置为custom之后,导航栏只保留右上角胶囊按钮,颜色.标题文字内容均可以自定义,可以此实现导航栏的个性化需求,实际应用如沉浸式视频播放页等. 小程序7.0.0之后的版本开始支持自定义单个页面的导航栏,将页面的navigationStyle设置为custom即可.mpvue的配置方式如下: 由于不同操作系统.不同机型的导航栏高度是

  • 详解使用mpvue开发github小程序总结

    前言 最近有点闲,想起关注已久的mpvue写小程序,所以稍微肝了半个多月写了个github版的微信小程序,已上线.现在总结一下遇到的坑. 扫码体验. 项目地址:https://github.com/cheesekun/wx-github mina坑 scroll-view 高度 可滚动视图区域. 使用竖向滚动时,需要给<scroll-view/>一个固定高度,通过 WXSS 设置 height. 小程序提供的scroll-view组件,想让他能滚动,就要给他提供一个固定的高度. 我们一般需求是

  • 基于vue开发微信小程序mpvue-docs跳转页面功能

    打开github,把项目克隆下来https://github.com/F-loat/mpvue-quickstart 跳转页面,废话不多说直接点... 打开pages.js 默认是有两个页面的, 现在新添加一个newpage的页面 这样加就行了! 然后是 用模版上的方法去跳转页面已测试OK, 虽然是很简单的问题,但是没找到在哪写的,所以给记录下来!希望对你有用 总结 以上所述是小编给大家介绍的基于vue开发微信小程序mpvue-docs跳转页面功能,希望对大家有所帮助,如果大家有任何疑问请给我留

  • 解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题

    前言 最近博主正在用微信小程序开发一款网上商城系统.恰好赶上了美团开源的小程序开发框架mpvue.该框架继承了vue.js的特性,用起来还是蛮爽的.然后在开发中,数据仓库这块懵逼了, 引入的vuex的辅助函数mapState.mapGetters.mapMutations.mapActions等怎么就不能用呢.苦恼之际打开D盘,一番愉悦之后,终于想通啦- 问题分析 •vuex辅助函数 首先简单说一下vuex的辅助函数mapState.mapGetters.mapMutations.mapActi

  • mpvue开发音频类小程序踩坑和建议详解

    这是我第一次开发小程序,开发的产品是音频类的,在大佬的建议下采用了 mpvue ,一周时间把功能都做出来,由于不太熟悉mpvue和微信小程序,足足用了一周时间来改bug才出来一个能用的版本,在这里整理分享下我开发时遇到的一些问题和给出一些建议. 在 Linux 上开发小程序 在公司电脑装了双系统,日常用的是 Ubuntu 系统,Linux或Mac的开发环境对前端相对来说会友好一些.微信小程序官方的开发者工具只有 Windows 和 Mac 版本,所以这就尴尬了. 不过还好,发现已经有大神在Git

  • 使用Vue开发自己的Chrome扩展程序过程详解

    前言 浏览器扩展程序是可以修改和增强 Web 浏览器功能的小程序.它们可用于各种任务,例如阻止广告,管理密码,组织标签,改变网页的外观和行为等等. 好消息是浏览器扩展并不难写.可以用你已经熟悉的 Web 技术(HTML.CSS 和 JavaScript)创建 -- 就像普通网页一样.但是与网页不同的是,扩展程序可以访问许多特定于浏览器的 API,这才是有趣的地方. 在本教程中,我将向你展示如何为 Chrome 构建一个能够改变新标签页行为的简单扩展.这个扩展程序的 JavaScript 部分,我

  • vue开发设计分支切换与cleanup实例详解

    目录 分支切换与cleanup 了解分支切换 分支切换导致的问题 如何清除掉副作用函数的无效关联关系? 疑问:为什么对传入的副作用函数进行一层包裹? 完整代码 产生的问题:代码运行发生栈溢出 如何解决此种情况下的栈溢出? 嵌套的effect与effect栈 effect嵌套的场景? 初始化 原因: 支持嵌套 避免无限递归循环 产生无限递归循环的代码: 原因分析: 解决循环 完整代码 分支切换与cleanup 了解分支切换 代码示例如下 const data = { ok: true, text:

  • 使用apifm-wxapi快速开发小程序过程详解

    使用apifm-wxapi快速开发小程序过程详解

    前言 我们要开发小程序,基本上都要涉及到以下几个方面的工作: 1.购买服务器,用来运行后台及接口程序: 2.购买域名,小程序中需要通过域名来调用服务器的数据: 3.购买 SSL 证书,小程序强制需要 https 的地址,传统无证书不加密的 http 请求微信不支持: 4.后台程序员开发后台程序,这样才能登录后台进行商品管理.订单维护.资金财务管理等等: 5.后台程序员开发小程序可用的 restfull api 接口或者是 websocket 接口: 6.开发的后台及接口程序的安全性.功能性.稳定

  • 适合前端Vue开发童鞋的跨平台Weex的使用详解

    基于 Vue 技术栈的你如果需要选用一种移动端跨平台框架,是 Weex?React-Native?还是Flutter? 无疑,相对于后两者,因为你现在已有比较熟练的 Vue 基础,如果在其他条件一致的情况,Weex 无疑是最佳选择:但是 Weex 真的适合在实际项目中进行移动端跨平台开发吗?Weex 的开发效率.Weex 的质量是否满足需求? 一.开发环境 在这个 Weex app 开发中,我的开发环境相关配置如下: 工具名称 版本号 Node.js 8.2.1 Npm 5.3.0 Androi

  • HBuilder导入vue项目并通过域名访问的过程详解

    HBuilder导入vue项目并通过域名访问的过程详解

    目录 一.什么是node.js 二.node.js和npm关系 三.导入项目 通常运行vue项目需要安装Node.js.通过npm命令来安装vue组件和运行vue项目. 一.什么是node.js node.js不是一门语言,不是库,不是框架,只是一个javeScript运行时环境 简单的就是node.js可以解析和执行javeScript代码,以前只有浏览器可以解析执行JaveScript代码, 现到的javeScript可以完全脱离浏览器来运行,一切都归功于node.js. nodejs构建于

  • 在交互式环境中执行Python程序过程详解

    在交互式环境中执行Python程序过程详解

    前言 相信接触过Python的伙伴们都知道运行Python脚本程序的方式有多种,目前主要的方式有:交互式环境运行.命令行窗口运行.开发工具上运行等,其中在不同的操作平台上还互不相同.今天,小编讲些Python基础的内容,以Windows下交互式环境为依托,演示Python程序的运行. 一般来说,顺利安装Python之后,有两种方式可以进入Python交互性环境.一种是在Python自带的IDLE中直接打开交互式窗口,如下图所示: 另一种是打开开始菜单,输入cmd之后,进入命令行窗口,之后输入Py

  • Android开发vsts agent支持自定义task过程详解

    Android开发vsts agent支持自定义task过程详解

    vsts 中支持自定义Build/Release的过程Task 目标:做一个可以读取 Xamarin.Android 所生成的 APK 的 基本信息的 task ,包括 package(包名) / application label(应用标题 )/version name(版本号)/version code(版本代码) 下面简述流程 1.下载并安装 Visual Studio Code(http://code.visualstudio.com ),当然使用 Visual Studio 或者其它任

  • Python基于数列实现购物车程序过程详解

    要求 1.启动程序后让用户输入余额,并打印商品列表 2.用户通过输入编号购买商品 3.用户选择商品购买后,根据余额判断成功或者失败,给出对应提示 4.可以随时退出,退出后打印账号余额以及购买的商品列表 构思 1.首先,用户余额需要进行存储,用户购买的物品需要进行存储在数组中 2.用户购买成功后,将购买的物品放入物品集合,并用总金额减去余额 3.如果失败,给出失败提示,并打印余额 4.用户选择继续后,无论成功失败,都可以继续购买 代码 # 用户输入工资 balance = int(input("P

  • python3+django2开发一个简单的人员管理系统过程详解

    python3+django2开发一个简单的人员管理系统过程详解

    一.基础环境准备 windows环境: Pycharm python3.6 Django2.0.1 Mysql5.7 安装django 在pycharm terminal 控制台执行: python3 -m pip install django #因为本地安装了python2.7 和python3.6 2个版本,所以python3.6环境变量对应python3 二.创建工程和应用 django-admin.py startproject qiakrcmdb #工程名称 cd qiakrcmdb

  • 基于vue开发的在线付费课程应用过程

    使用 vux UI组件库 使用 vue-navigation 缓存页面,此库实现了前进刷新后退读缓存的功能,像原生APP导航一样.用子路由的方式实现tabbar有bug,用vuex解决了. 使用 lib-flexible 解决移动页面适配 来一个清单 "dependencies": { "fastclick": "^1.0.6", "lib-flexible": "^0.3.2", "lodash

随机推荐