前端技术Javaweb阶段包括前端、数据库和动态网页。Javaweb是互联网项目的入门课程，是学习后面高进阶课程的基础。
JavaWeb其实做什么都可以,你可以通过JavaWeb制作一个软件,一个ERP,一个网页,甚至是一个网络游戏都可以丫。
const store = new Vuex.Store({state: {audio: {‘id’: 0,’name’: ‘歌曲名称’,’singer’: ‘演唱者’,’albumPic’: ‘/static/player-bar.png’,’location’: ”,’album’: ”},lyric: ‘正在加载中。’,currentIndex: 0, // 当前播放的歌曲位置playing: false, // 是否正在播放loading: false, // 是否正在加载中showDetail: false,songList: , // 播放列表currentTime: 0,tmpCurrentTime: 0,durationTime: 0,bufferedTime: 0,change: false // 判断是更改的时间还是播放的时间},getters: {audio: state => state.audio,playing: state => state.playing,loading: state => state.loading,showDetail: state => state.showDetail,durationTime: state => state.durationTime,currentIndex: state => state.currentIndex,bufferedTime: state => state.bufferedTime,tmpCurrentTime: state => state.tmpCurrentTime,songList: state => state.songList,change: state => state.change,currentTime: state => state.currentTime,prCurrentTime: state => {return state.currentTime / state.durationTime * 100},prBufferedTime: state => {return state.bufferedTime / state.durationTime * 100}},mutations: {play (state) {state.playing = true},pause (state) {state.playing = false},toggleDetail (state) {state.showDetail = !state.showDetail},setAudio (state) {state.audio = state.songList[state.currentIndex – 1]},setAudioIndex (state, index) {state.audio = state.songList[index]state.currentIndex = index + 1},removeAudio (state, index) {state.songList.splice(index, 1)state.audio = state.songList[index – 1]state.currentIndex = state.currentIndex – 1if (state.songList.length === 0) {state.audio = {‘id’: 0,’name’: ‘歌曲名称’,’singer’: ‘演唱者’,’albumPic’: ‘/static/player-bar.png’,’location’: ”,’album’: ”}state.playing = false}},setChange (state, flag) {state.change = flag},setLocation (state, location) {state.audio.location = location},updateCurrentTime (state, time) {state.currentTime = time},updateDurationTime (state, time) {state.durationTime = time},updateBufferedTime (state, time) {state.bufferedTime = time},changeTime (state, time) {state.tmpCurrentTime = time},openLoading (state) {state.loading = true},closeLoading (state) {state.loading = false},resetAudio (state) {state.currentTime = 0},playNext (state) { // 播放下一曲state.currentIndex++if (state.currentIndex > state.songList.length) {state.currentIndex = 1}state.audio = state.songList[state.currentIndex – 1]},playPrev (state) { // 播放上一曲state.currentIndex–if (state.currentIndex < 1) {state.currentIndex = state.songList.length}state.audio = state.songList[state.currentIndex - 1]},addToList (state, item) {var flag = falsestate.songList.forEach(function (element, index) { // 检测歌曲重复if (element.id === item.id) {flag = truestate.currentIndex = index + 1}})if (!flag) {state.songList.push(item)state.currentIndex = state.songList.length}},setLrc (state, lrc) {state.lyric = lrc}},// 异步的数据操作actions: {getSong ({commit, state}, id) {commit('openLoading')Axios.get(api.getSong(id)).then(res => {// 统一数据模型，方便后台接口的改变var url = res.data.data[0].urlcommit(‘setAudio’)commit(‘setLocation’, url)})},getLrc ({commit, state}, id) {commit(‘setLrc’, ‘[txt](加载中。’)Axios.get(api.getLrc(id)).then(res => {// 1、先判断是否有歌词if (res.data.nolyric) {commit(‘setLrc’, ‘[txt](⊙０⊙) 暂无歌词’)} else {console.log(res.data.lrc.lyric)commit(‘setLrc’, res.data.lrc.lyric)}。
我们都知道互联网是有一个个页面组成的，而这些页面的搭建都是前端人员的功劳，所以从网页搭建开始入门javaweb,能得到很好的实践，网页搭建要学习html语言、js、css、等。
学完后目标：可以仿制任何网站前端页面，解决网页浏览器兼容性问题，解决PC端和移动端兼容性问题；使用前端脚本进行相关网页功能特效编写，使用JavaWeb核心技术轻松写出任何网站功能模块，使用JavaWeb高级部分知识解决网站的相关高并发问题，无压力胜任javaEE开发工程师职位。
