0基础如何进入IT行业?
简介:对于没有任何相关背景知识的人来说,如何才能成功进入IT行业?是否有一些特定的方法或技巧可以帮助他们实现这一目标?
方向一:学习路径
明确兴趣和目标:首先确定你对IT领域的兴趣和目标。IT行业非常广泛,包含了软件开发、网络管理、数据分析、人工智能等不同的领域。了解自己的兴趣和目标,可以帮助你选择适合的学习路径。
学习编程基础:无论你选择哪个领域,学习编程是一个重要的起点。掌握一门编程语言(如Python、JavaScript、Java等)和基本的编程概念(如变量、循环、函数等)是必要的。可以通过在线教程、编程学习平台、书籍等方式学习编程基础知识。
选择专业领域:根据自己的兴趣和目标选择IT领域中的一个专业方向,例如前端开发、后端开发、数据分析、网络安全等。针对选定的方向,深入学习相关的技术和知识,并进行实际项目练习。
方向二:技能培养
参加培训课程或学位课程:如果你想获得更系统化的学习经验,可以考虑参加IT培训班或报读相关的学位课程。这些课程通常会提供更深入的知识和实践机会,并且可以获得认可的证书或学位,有助于增加就业竞争力。
做项目和实践:在学习过程中,尽量多做一些项目和实践练习,以实际应用所学知识。可以参与开源项目、自己构建小型应用程序或者参加一些编程比赛,这样可以展示你的技能并积累宝贵的经验。
建立专业网络:参加一些IT行业的活动、交流会议或者加入相关的社群,与从业者建立联系,并从他们那里获取指导和支持。与其他人分享你的学习和项目经验,也可以帮助你扩展专业网络。
持续学习和跟进技术发展:IT行业发展迅速,新技术和工具层出不穷。要保持竞争力,需要持续学习和跟进最新的技术趋势。关注行业动态、阅读技术文章、参加在线课程或研讨会,都是不断学习的好方法。
最后祝愿大家能够学有所成,学有所用!
那么好,咱们回归正传。这一节将实践一个综合案例,结合了前面所学的知识。
实例:记账本
实现功能:
1. 基本渲染:基于后端数据动态渲染;
2. 添加功能:通过表单元素向后端添加数据;
3. 删除功能:通过删除按钮动态删除后端数据;
4. 饼图渲染:基于渲染数据使用饼图可视化。
5. 生命周期钩子函数灵活运用
思路:
这一个案例的前提要求便是获取并修改后端数据,这一点是最为重要的!
axios 简介
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:
支持原生 TypeScript
请求响应拦截
支持 node.js
从浏览器中创建 XMLHttpRequest
支持 Promise API....
导入:
//使用npm
npm install axios
//使用yarn
yarn add axios
//或者使用cdn:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
发起GET请求:
axios.get('https://api.example.com/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
发起POST请求:
axios.post('https://api.example.com/submit', { username: 'john', password: 'secret' })
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
您还可以在请求中设置其他参数,如请求头、请求参数等。例如:
axios.get('https://api.example.com/data', {
headers: {
'Authorization': 'Bearer token'
},
params: {
page: 1,
limit: 10
}
})
饼图可视化:
了解了axios如何请求和修改后端数据,咱们来学习下如何进行饼图可视化。
在Vue.js中渲染饼图通常使用一些流行的数据可视化库,比如Chart.js或者ECharts。本案例中,我们使用了ECharts来渲染。
ECharts是一个使用 JavaScript 实现的开源可视化库,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等)及兼容多种设备,可随时随地任性展示。ECharts 提供了丰富的图表类型和交互能力,使用户能够通过简单的配置生成各种各样的图表,包括但不限于折线图、柱状图、散点图、饼图、雷达图、地图等,可高度个性化定制的数据可视化图表。
导入:
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
使用:
在绘图前我们需要为Echarts准备一个具备宽高的DOM容器,然后通过echarts.init方法初始化一个Echarts实例并通过setOption方法生成一个简单的图型,下面是完整代码:
<template>
<div ref="pieChart" style="width: 600px; height: 400px;"></div>
</template>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script>
export default {
mounted() {
this.renderPieChart();
},
methods: {
renderPieChart() {
const chartDom = this.$refs.pieChart;
const myChart = echarts.init(chartDom);
const option = {
series: [{
type: 'pie',
data: [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' },
{ value: 1548, name: '搜索引擎' }
]
}]
};
myChart.setOption(option);
}
}
};
</script>
代码:
html:
<div id="app">
<div class="top">
<input v-model="name" placeholder="消费名称">
<input v-model="price" placeholder="消费金额">
<button @click="add()">添加条目</button>
</div>
<div class="table">
<table>
<header>
<tr>
<th>编号</th>
<th>消费名称</th>
<th>消费金额</th>
<th>操作</th>
</tr>
</header>
<tbody>
<tr v-for="(item, index) in list" :key="item.id">
<td>{{ index+1 }}</td>
<td>{{ item.name }}</td>
<td :class="{red: item.price > 500}">{{ item.price.toFixed(2) }}</td>
<td><button @click="del(item.id)">删除</button></td>
</tr>
</tbody>
<footer>
<tr>
<td colspan="4" style="text-align: left;">消费总计:{{ total.toFixed(2) }}</td>
</tr>
</footer>
</table>
</div>
<!-- 准备好具备大小的DOM -->
<div id="chart"></div>
</div>
js:
<script>
const app = new Vue({
el: '#app',
data: {
list:[],
name:'',
price:''
},
computed: {
total(){
return this.list.reduce((sum,item) => sum + item.price,0)
}
},
created(){
// 使用添加/删除功能后,需要重新渲染,将下列封装为函数更为高效
// let res = await axios.get('https://xxx',{
// params:{
// creator: '李世民'
// }
// })
// // console.log(res)
// this.list = res.data.data
this.addList()
},
mounted(){
// 创建echart实例
this.myChart = echarts.init(document.querySelector('#chart'))
//配置数据
this.myChart.setOption({
title: {
text: '我的消费账单',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [{
name: '明细',
type: 'pie',
radius: '50%', //半径
data: [], //匹配后台数据,默认为空
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
})
},
methods: {
async addList(){
// 发送请求,获取数据
let res = await axios.get('https://xxx',{
params:{
creator: '小白'
}
})
this.list = res.data.data
// 获取数据后,重新配置饼图的数据,更新图表
this.myChart.setOption({
// 仅需要配置数据项
series: [{
data: this.list.map(item => ({value: item.price, name: item.name})),
}]
})
},
async add(){
// 发送请求,修改数据
let res = await axios.post('https://xxx',{
creator: '小白',
name: this.name,
price: this.price
})
console.log(res)
// 重新渲染页面
this.addList()
this.name = ''
this.price = ''
},
async del(id){
// 发送请求,根据ID修改数据
let res = await axios.delete(`https://xxx/${id}`)
console.log(id)
// 重新渲染页面
this.addList()
}
}
})
</script>
css:
<style>
table{
width: 500px;
margin-top: 10px;
border-collapse: collapse;
}
th, td{
height: 30px;
text-align: center;
line-height: 20px;
border: 1px solid black;
}
#chart{
width: 500px;
height: 400px;
margin-top: 20px;
border: 1px solid black;
}
.red{
color: red;
}
</style>
效果:
注意:
案例中还有很多需要注意的点,比如: 应该是在created()里使用axios获取后端数据然后渲染,但是使用添加/删除功能后,还需要重新渲染,但是这已经不属于created()钩子范围内,所以将axios的get方法封装为函数使用更为高效。