【腾讯云 Cloud studio 实战训练营】云端 IDE 构建移动端H5_h5页面内嵌小型ide
还有兄弟不知道网络安全面试可以提前刷题吗？费时一周整理的160+网络安全面试题，金九银十，做网络安全面试里的显眼包！王岚嵚工程师面试题（附答案），只能帮兄弟们到这儿了！如果你能答对70%，找一个安全工作，问题不大。对于有1-3年工作经验，想要跳槽的朋友来说，也是很好的温习资料！【完整版领取方式在文末！！内容实在太多，不一一截图了。
·
还有兄弟不知道网络安全面试可以提前刷题吗？费时一周整理的160+网络安全面试题，金九银十，做网络安全面试里的显眼包！
王岚嵚工程师面试题（附答案），只能帮兄弟们到这儿了！如果你能答对70%，找一个安全工作，问题不大。
对于有1-3年工作经验，想要跳槽的朋友来说，也是很好的温习资料！
【完整版领取方式在文末！！】
93道网络安全面试题
内容实在太多，不一一截图了
黑客学习资源推荐
最后给大家分享一份全套的网络安全学习资料，给那些想学习 网络安全的小伙伴们一点帮助！
对于从来没有接触过网络安全的同学，我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线，大家跟着这个大的方向学习准没问题。
1️⃣零基础入门
① 学习路线
对于从来没有接触过网络安全的同学，我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线，大家跟着这个大的方向学习准没问题。
② 路线对应学习视频
同时每个成长路线对应的板块都有配套的视频提供：
网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
1、应用场景
（1）在线编程
Cloud Studio 内置丰富的开发环境，无需配置即可使用，只需打开浏览器，即可拥有完备的线上编程体验，基于 Web 端的代码编辑器，简洁的界面与全面的功能，非常适合在线施展编码潜能。
（2）腾讯云 SCF 平台集成
Cloud Studio 支持在线编辑、在线调试、持久化资源，为腾讯云 SCF 行业用户提供开发、测试到部署完整闭环的云原生开发体验。
2、产品优势
Cloud Studio 是腾讯云为用户打造的云端集成开发环境，其产品优势如下所示：
- 全功能
无需下载安装，随时随地开发编码，拥有媲美本地 IDE 的流畅编码体验。 - 多环境
内置 Node.js、Java、Python 等常见环境，也可以连接到云服务器进行资源管理。 - 在线预览
在线预览快速生成预览链接，方便分享他人展示项目或在线调试。 - 兼容 VS Code 插件
默认的配置无法满足需求，可以在线安装 VS Code 插件来增强使用体验。 - 持久化和快速加载
随开随写，随时保存，再也无需担心断电未保存，不浪费您的每一份灵感。
三、构建移动端H5
我们用云 IDE Cloud Studio 快速搭建还原一个移动端 H5 的页面，这里我们打算使用Vue3来实现，体验云 IDE 给我们带来的优势。最终结果如下图所示：
1、注册
腾讯云 Cloud studio官网注册账号即可，这里注册和登录 Cloud Studio 非常方便，提供了三种注册方式：
- 使用 CODING 账号注册
- 使用微信授权注册
- 使用 GitHub 授权注册（本文使用方式）
在这里插入图片描述
2、创建模版
Cloud Studio 控制台中罗列了常见的集成开发环境，支持了40+的多种模板（框架模板、云原生模板、建站模板），单击所需模板卡片即可进入对应环境中，也可以选择新建工作空间中的云服务器模式，连接云服务器进行开发环境搭建。这里我们选择Vue项目模版。
3、模版初始化
创建模版成功后，会进行模版初始化，会自动加载我们需要依赖，然后我们启动项目
yarn dev
接下来就看到项目的预览效果，如下：
4、开发移动端H5项目
（1）安装vant
yarn add vant@^3.6.12
（2）按需引入组件样式
在基于 vite、webpack 或 vue-cli 的项目中使用 Vant 时，可以使用 unplugin-vue-components 插件，它可以自动引入组件，并按需引入组件的样式。
相比于常规用法，这种方式可以按需引入组件的 CSS 样式，从而减少一部分代码体积，但使用起来会变得繁琐一些。如果业务对 CSS 的体积要求不是特别极致，我们推荐使用更简便的常规用法。
// —D表示安装到开发依赖中
yarn add -D unplugin-vue-components@^0.22.7
需要配置下vite.config.js文件，如下：
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 引入以下2个库
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
// 增加以下配置
Components({
// 不生成类型声明文件自己写
dts: false,
// 样式需要单独引入
resolvers: [VantResolver({ importStyle: false })]
}),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
（3）安装 Less
Vite 和 Webpack 不同，不需要 less-loader 等，只需安装 less
yarn add -D less@^3.12.2
vite.config.js文件需要增加以下配置：
// 增加以下css配置代码
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
},
},
},
（4）安装 normalize
Normalize.css 是CSS重置的现代替代方案，可以为默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。
yarn add -D normalize.css@^8.0.1
（5）main.js引入相关库和包
import { createApp } from 'vue'
import App from './App.vue'
// 按需引入 Vant
import { Tabbar, TabbarItem } from 'vant';
import 'vant/lib/index.css'
// CSS 重置的现代替代方案
import 'normalize.css/normalize.css'
// 实例化 Vue 实例
const app = createApp(App)
// 安装 Vant 相关使用插件
app.use(Tabbar);
app.use(TabbarItem);
// 挂载到 #app 节点
app.mount('#app')
（6）移动端适配
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
<!-- built files will be auto injected -->
<script>
// rem定义
/\*
720代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例
\*/
getRem(375, 100);
window.onresize = function() {
getRem(375, 100);
};
function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
var oWidth =
document.documentElement.clientWidth || document.body.clientWidth;
html.style.fontSize = (oWidth / pwidth) \* prem + "px";
}
// 安卓机中，默认字体大小不让用户修改
;(function () {
if (typeof WeixinJSBridge == 'object' && typeof WeixinJSBridge.invoke == 'function') {
handleFontSize()
} else {
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', handleFontSize, false)
} else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', handleFontSize)
document.attachEvent('onWeixinJSBridgeReady', handleFontSize)
}
}
function handleFontSize() {
// 设置网页字体为默认大小
WeixinJSBridge.invoke('setFontSizeCallback', {
fontSize: 0,
})
// 重写设置网页字体大小的事件
WeixinJSBridge.on('menu:setfont', function () {
WeixinJSBridge.invoke('setFontSizeCallback', {
fontSize: 0,
})
})
}
})()
</script>
</body>
</html>
（7）App.vue业务代码
<template>
<div class="container">
<van-nav-bar
title="e租宝案"
left-arrow
/>
<div class="list\_box">
<div class="list">
<div class="list-head">开庭前准备 5</div>
<div class="list\_item">
<div class="list\_item-head">
<van-checkbox v-model="radio" shape="square">核对证据原件并存档</van-checkbox>
<div class="list\_item-head\_name">
<div class="list\_item-head\_name-tag"></div>
<div class="list\_item-head\_name-text">e租宝案</div>
</div>
</div>
<div class="list\_item-info">
<img class="list\_item-info\_img" style="display: block;" src="https://cs-res.codehub.cn/workspace/assets/icons/emberjs.svg" lazy-load alt="" />
<div class="list\_item-info\_tag list\_item-info\_tag--gray">03-28 截止</div>
<img class="list\_item-info\_clock" style="display: block;" src="https://cs-res.codehub.cn/vscode/serverless.svg" lazy-load alt="" />
</div>
</div>
<div class="list\_item list\_item--blue">
<div class="list\_item-head">
<van-checkbox v-model="radio1" shape="square">调取并查阅案卷</van-checkbox>
<div class="list\_item-head\_name">
<div class="list\_item-head\_name-tag"></div>
<div class="list\_item-head\_name-text">e租宝案</div>
</div>
</div>
<div class="list\_item-info">
<img class="list\_item-info\_img" style="display: block;" src="https://cs-res.codehub.cn/workspace/assets/icons/emberjs.svg" lazy-load alt="" />
<div class="list\_item-info\_tag list\_item-info\_tag--blue">下周一 截止</div>
<img class="list\_item-info\_clock" style="display: block;" src="https://cs-res.codehub.cn/vscode/serverless.svg" lazy-load alt="" />
</div>
</div>
<div class="list\_item list\_item--orange">
<div class="list\_item-head">
<van-checkbox v-model="radio2" shape="square">领取传票并通知委托人</van-checkbox>
<div class="list\_item-head\_name">
<div class="list\_item-head\_name-tag"></div>
<div class="list\_item-head\_name-text">e租宝案</div>
</div>
</div>
<div class="list\_item-info">
<img class="list\_item-info\_img" style="display: block;" src="https://cs-res.codehub.cn/workspace/assets/icons/emberjs.svg" lazy-load alt="" />
<div class="list\_item-info\_tag list\_item-info\_tag--orange">明天 17:00 截止</div>
<img class="list\_item-info\_clock" style="display: block;" src="https://cs-res.codehub.cn/vscode/serverless.svg" lazy-load alt="" />
</div>
</div>
<div class="list\_item list\_item--red">
<div class="list\_item-head">
<van-checkbox v-model="radio3" shape="square">写委托书</van-checkbox>
<div class="list\_item-head\_name">
<div class="list\_item-head\_name-tag"></div>
<div class="list\_item-head\_name-text">e租宝案</div>
</div>
</div>
<div class="list\_item-info">
<img class="list\_item-info\_img" style="display: block;" src="https://cs-res.codehub.cn/workspace/assets/icons/emberjs.svg" lazy-load alt="" />
<div class="list\_item-info\_tag list\_item-info\_tag--red">2019-2-12 截止</div>
<img class="list\_item-info\_clock" style="display: block;" src="https://cs-res.codehub.cn/vscode/serverless.svg" lazy-load alt="" />
</div>
</div>
</div>
</div>
<van-tabbar v-model="active">
<van-tabbar-item icon="comment-o">名片夹</van-tabbar-item>
<van-tabbar-item icon="shop-o">官网</van-tabbar-item>
<van-tabbar-item icon="user-o">我的</van-tabbar-item>
</van-tabbar>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
active: 0,
radio: false,
radio1: false,
radio2: false,
radio3: false,
};
},
};
</script>
<style lang="less">
html,
body {
// font-family: PingFangSC-Medium, PingFang SC, Arial, 'Microsoft Yahei', sans-serif;
font-family: Arial, 'Microsoft Yahei', sans-serif;
font-size: 0.14rem;
// line-height: 0.24rem;
color: #333;
background: #f9f9f9;
// iPhone 横屏默认会放大文字，设置text-size-adjust会解决这个问题
-webkit-text-size-adjust: 100% !important;
-moz-text-size-adjust: 100% !important;
text-size-adjust: 100% !important;
}
\* {
### 一、网安学习成长路线图
网安所有方向的技术点做的整理，形成各个领域的知识点汇总，它的用处就在于，你可以按照上面的知识点去找对应的学习资源，保证自己学得较为全面。
### 二、网安视频合集
观看零基础学习视频，看视频学习是最快捷也是最有效果的方式，跟着视频中老师的思路，从基础到深入，还是很容易入门的。
### 三、精品网安学习书籍
当我学到一定基础，有自己的理解能力的时候，会去阅读一些前辈整理的书籍或者手写的笔记资料，这些笔记详细记载了他们对一些技术点的理解，这些理解是比较独到，可以学到不一样的思路。
### 四、网络安全源码合集+工具包
光学理论是没用的，要学会跟着一起敲，要动手实操，才能将自己的所学运用到实际当中去，这时候可以搞点实战案例来学习。
### 五、网络安全面试题
最后就是大家最关心的网络安全面试题板块
**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**
**[需要这份系统化资料的朋友，可以点击这里获取](https://bbs.csdn.net/forums/4f45ff00ff254613a03fab5e56a57acb)**
**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**
腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。
更多推荐
18
0- 0
已为社区贡献1条内容
所有评论(0)