├── .gitignore ├── LICENSE ├── README.md ├── SCshot.png ├── docs ├── .vitepress │ ├── cache │ │ └── deps │ │ │ ├── @theme_index.js │ │ │ ├── @theme_index.js.map │ │ │ ├── _metadata.json │ │ │ ├── chunk-E3XMU3BF.js │ │ │ ├── chunk-E3XMU3BF.js.map │ │ │ ├── chunk-EAQQYTHI.js │ │ │ ├── chunk-EAQQYTHI.js.map │ │ │ ├── package.json │ │ │ ├── vitepress___@vue_devtools-api.js │ │ │ ├── vitepress___@vue_devtools-api.js.map │ │ │ ├── vitepress___@vueuse_core.js │ │ │ ├── vitepress___@vueuse_core.js.map │ │ │ ├── vitepress___@vueuse_integrations_useFocusTrap.js │ │ │ ├── vitepress___@vueuse_integrations_useFocusTrap.js.map │ │ │ ├── vitepress___mark__js_src_vanilla__js.js │ │ │ ├── vitepress___mark__js_src_vanilla__js.js.map │ │ │ ├── vitepress___minisearch.js │ │ │ ├── vitepress___minisearch.js.map │ │ │ ├── vue.js │ │ │ └── vue.js.map │ └── config.mjs ├── about.md ├── api-examples.md ├── assets │ ├── AobaAsk.jpg │ ├── AobaSuzukaze.png │ ├── git.jpg │ ├── html.jpg │ ├── image-20240929204815-t2wjf0h.png │ ├── image-20240929211337-vvvpqdu.png │ ├── image-20241028194512-55jdmsb.png │ ├── image-20241028201205-q7xso1s.png │ ├── image-20241028201443-b2ncv3a.png │ ├── image-20241028201929-zd0i0kd.png │ ├── image-20241112195309-fxj1l3k.png │ ├── image-20241112195626-uanlg4k.png │ ├── image-20241112195830-d9hh5n9.png │ ├── image-20241112195953-n5t5tmn.png │ ├── image-20241112200712-fhiedlb.png │ ├── image-20241112200752-wur6w58.png │ ├── image-20241119183520-dogzsvx.png │ ├── image-20241119184117-ujv9wu9.png │ ├── image-20241119191725-kexcq95.png │ ├── image-20241119191741-9jiwwlw.png │ ├── image-20241203221742-1m7716q.png │ ├── image-20241203225449-ghlmqno.png │ ├── image-20241203232937-wcyv1we.png │ ├── image-20241211105509-wmmh2bb.png │ ├── image-20241225181748-vlgccpr.png │ ├── image-20241225182908-7e0hdi4.png │ ├── image-20241225183028-jg2cf77.png │ ├── image-20241225183620-fec45za.png │ ├── image-20241225183721-i6ux1uu.png │ ├── image-20241225183853-bdyp9d2.png │ ├── image-20241225184740-qlqkm99.png │ ├── image-20241225203944-3qlf3yl.png │ ├── image-20241225205751-wl74gjl.png │ ├── image-20241225205943-gf22qtm.png │ ├── image-20241225211009-3p2zohh.png │ ├── image-20241225211051-da0plta.png │ ├── intro.jpg │ ├── learnCS-20240929212226-b2s7e6d.jpg │ └── logo.png ├── basic.md ├── index.md ├── intro.md ├── markdown-examples.md ├── prepare.md ├── public │ └── logo.png ├── schedule.md ├── schedule.old.md ├── week-1 │ ├── doc.md │ ├── homework.md │ └── lab.md ├── week-2 │ ├── doc.md │ ├── homework.md │ └── lab.md ├── week-3 │ ├── 前端doc.md │ ├── 前端homework.md │ ├── 前端lab.md │ ├── 后端doc.md │ ├── 后端homework.md │ └── 后端lab.md ├── week-4 │ ├── 前端doc.md │ ├── 前端homework.md │ ├── 前端lab.md │ ├── 后端doc.md │ ├── 后端homework.md │ └── 后端lab.md ├── week-5 │ ├── pic.zip │ ├── 前端doc.md │ ├── 前端homework.md │ ├── 前端lab.md │ ├── 后端doc.md │ ├── 后端homework.md │ └── 后端lab.md ├── week-6 │ ├── 前端doc.md │ ├── 前端homework.md │ ├── 前端lab.md │ ├── 后端doc.md │ ├── 后端homework.md │ └── 后端lab.md ├── week-7 │ ├── doc.md │ └── lab.md └── week-8 │ ├── 前端.md │ └── 后端.md ├── package.json └── pnpm-lock.yaml /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | docs/.vitepress/dist 3 | .idea -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Duke486 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Web Dev Beginner Guide 🌐 2 | 3 | 欢迎来到 **Web-Dev-Beginner**！这份教程通过有趣且实用的方式，帮助零基础的你学习前后端开发。课程中穿插实际开发的案例故事，配套 AI 辅导平台将助你快速提升开发技能。 4 | 5 | Welcome to **Web-Dev-Beginner**! This Doc is designed to help complete beginners learn both frontend and backend development in a fun and practical way. With our AI tutoring platform, you will rapidly improve your development skills. 6 | 7 | 🚀 **Read Online**: [Explore the site here!](https://doc.duke486.com/) 8 | ![image](https://github.com/Duke486/Web-Dev-Beginner/blob/main/SCshot.png) 9 | ## What's Inside? 📚 10 | 11 | - **Frontend**: Learn the basics of HTML, CSS, JavaScript, and Vue.js 🖥️ 12 | - **Backend**: Dive into Node.js, Express, and databases 🌐 13 | - **Step-by-Step Tutorials**: Each topic is broken down into easy-to-follow lessons and labs 👩‍💻👨‍💻 14 | - **Assignments**: Test your knowledge with practical assignments after each section ✅ 15 | 16 | 17 | 18 | 19 | ## Who is this for? 🎯 20 | 21 | - **Complete beginners** to web development 22 | - Anyone who wants to learn both **frontend** and **backend** at a steady pace 23 | - People who prefer **hands-on labs** and **easy-to-understand explanations** 24 | 25 | ## How to Run your own Site 🛠️ 26 | ```bash 27 | git clone https://github.com/yourusername/web-dev-beginner.git 28 | npm install 29 | npm run docs:dev 30 | ``` 31 | 32 | ## Contributing 🤝 33 | 34 | Feel free to contribute by opening issues or submitting pull requests! Let's make this resource even better together. 35 | 36 | --- 37 | 38 | Happy coding! 💻 39 | -------------------------------------------------------------------------------- /SCshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Duke486/Web-Dev-Beginner/66d659aa151f16e63da52cf4056b83a0320926c2/SCshot.png -------------------------------------------------------------------------------- /docs/.vitepress/cache/deps/_metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "hash": "e672359d", 3 | "configHash": "24956e83", 4 | "lockfileHash": "755e5086", 5 | "browserHash": "dc8603a7", 6 | "optimized": { 7 | "vue": { 8 | "src": "../../../../node_modules/.pnpm/vue@3.5.12/node_modules/vue/dist/vue.runtime.esm-bundler.js", 9 | "file": "vue.js", 10 | "fileHash": "a7dba2f6", 11 | "needsInterop": false 12 | }, 13 | "vitepress > @vue/devtools-api": { 14 | "src": "../../../../node_modules/.pnpm/@vue+devtools-api@7.4.6/node_modules/@vue/devtools-api/dist/index.js", 15 | "file": "vitepress___@vue_devtools-api.js", 16 | "fileHash": "521c420e", 17 | "needsInterop": false 18 | }, 19 | "vitepress > @vueuse/core": { 20 | "src": "../../../../node_modules/.pnpm/@vueuse+core@11.1.0_vue@3.5.12/node_modules/@vueuse/core/index.mjs", 21 | "file": "vitepress___@vueuse_core.js", 22 | "fileHash": "691c1b6e", 23 | "needsInterop": false 24 | }, 25 | "vitepress > @vueuse/integrations/useFocusTrap": { 26 | "src": "../../../../node_modules/.pnpm/@vueuse+integrations@11.1.0_focus-trap@7.6.0_vue@3.5.12/node_modules/@vueuse/integrations/useFocusTrap.mjs", 27 | "file": "vitepress___@vueuse_integrations_useFocusTrap.js", 28 | "fileHash": "36595fc3", 29 | "needsInterop": false 30 | }, 31 | "vitepress > mark.js/src/vanilla.js": { 32 | "src": "../../../../node_modules/.pnpm/mark.js@8.11.1/node_modules/mark.js/src/vanilla.js", 33 | "file": "vitepress___mark__js_src_vanilla__js.js", 34 | "fileHash": "5356607d", 35 | "needsInterop": false 36 | }, 37 | "vitepress > minisearch": { 38 | "src": "../../../../node_modules/.pnpm/minisearch@7.1.0/node_modules/minisearch/dist/es/index.js", 39 | "file": "vitepress___minisearch.js", 40 | "fileHash": "17c59f23", 41 | "needsInterop": false 42 | }, 43 | "@theme/index": { 44 | "src": "../../../../node_modules/.pnpm/vitepress@1.4.0_@algolia+client-search@4.24.0_postcss@8.4.47_search-insights@2.17.2/node_modules/vitepress/dist/client/theme-default/index.js", 45 | "file": "@theme_index.js", 46 | "fileHash": "1ace16b5", 47 | "needsInterop": false 48 | } 49 | }, 50 | "chunks": { 51 | "chunk-EAQQYTHI": { 52 | "file": "chunk-EAQQYTHI.js" 53 | }, 54 | "chunk-E3XMU3BF": { 55 | "file": "chunk-E3XMU3BF.js" 56 | } 57 | } 58 | } -------------------------------------------------------------------------------- /docs/.vitepress/cache/deps/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "module" 3 | } 4 | -------------------------------------------------------------------------------- /docs/.vitepress/cache/deps/vitepress___@vueuse_core.js.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "sources": [], 4 | "sourcesContent": [], 5 | "mappings": "", 6 | "names": [] 7 | } 8 | -------------------------------------------------------------------------------- /docs/.vitepress/cache/deps/vue.js: -------------------------------------------------------------------------------- 1 | import { 2 | BaseTransition, 3 | BaseTransitionPropsValidators, 4 | Comment, 5 | DeprecationTypes, 6 | EffectScope, 7 | ErrorCodes, 8 | ErrorTypeStrings, 9 | Fragment, 10 | KeepAlive, 11 | ReactiveEffect, 12 | Static, 13 | Suspense, 14 | Teleport, 15 | Text, 16 | TrackOpTypes, 17 | Transition, 18 | TransitionGroup, 19 | TriggerOpTypes, 20 | VueElement, 21 | assertNumber, 22 | callWithAsyncErrorHandling, 23 | callWithErrorHandling, 24 | camelize, 25 | capitalize, 26 | cloneVNode, 27 | compatUtils, 28 | compile, 29 | computed, 30 | createApp, 31 | createBaseVNode, 32 | createBlock, 33 | createCommentVNode, 34 | createElementBlock, 35 | createHydrationRenderer, 36 | createPropsRestProxy, 37 | createRenderer, 38 | createSSRApp, 39 | createSlots, 40 | createStaticVNode, 41 | createTextVNode, 42 | createVNode, 43 | customRef, 44 | defineAsyncComponent, 45 | defineComponent, 46 | defineCustomElement, 47 | defineEmits, 48 | defineExpose, 49 | defineModel, 50 | defineOptions, 51 | defineProps, 52 | defineSSRCustomElement, 53 | defineSlots, 54 | devtools, 55 | effect, 56 | effectScope, 57 | getCurrentInstance, 58 | getCurrentScope, 59 | getCurrentWatcher, 60 | getTransitionRawChildren, 61 | guardReactiveProps, 62 | h, 63 | handleError, 64 | hasInjectionContext, 65 | hydrate, 66 | hydrateOnIdle, 67 | hydrateOnInteraction, 68 | hydrateOnMediaQuery, 69 | hydrateOnVisible, 70 | initCustomFormatter, 71 | initDirectivesForSSR, 72 | inject, 73 | isMemoSame, 74 | isProxy, 75 | isReactive, 76 | isReadonly, 77 | isRef, 78 | isRuntimeOnly, 79 | isShallow, 80 | isVNode, 81 | markRaw, 82 | mergeDefaults, 83 | mergeModels, 84 | mergeProps, 85 | nextTick, 86 | normalizeClass, 87 | normalizeProps, 88 | normalizeStyle, 89 | onActivated, 90 | onBeforeMount, 91 | onBeforeUnmount, 92 | onBeforeUpdate, 93 | onDeactivated, 94 | onErrorCaptured, 95 | onMounted, 96 | onRenderTracked, 97 | onRenderTriggered, 98 | onScopeDispose, 99 | onServerPrefetch, 100 | onUnmounted, 101 | onUpdated, 102 | onWatcherCleanup, 103 | openBlock, 104 | popScopeId, 105 | provide, 106 | proxyRefs, 107 | pushScopeId, 108 | queuePostFlushCb, 109 | reactive, 110 | readonly, 111 | ref, 112 | registerRuntimeCompiler, 113 | render, 114 | renderList, 115 | renderSlot, 116 | resolveComponent, 117 | resolveDirective, 118 | resolveDynamicComponent, 119 | resolveFilter, 120 | resolveTransitionHooks, 121 | setBlockTracking, 122 | setDevtoolsHook, 123 | setTransitionHooks, 124 | shallowReactive, 125 | shallowReadonly, 126 | shallowRef, 127 | ssrContextKey, 128 | ssrUtils, 129 | stop, 130 | toDisplayString, 131 | toHandlerKey, 132 | toHandlers, 133 | toRaw, 134 | toRef, 135 | toRefs, 136 | toValue, 137 | transformVNodeArgs, 138 | triggerRef, 139 | unref, 140 | useAttrs, 141 | useCssModule, 142 | useCssVars, 143 | useHost, 144 | useId, 145 | useModel, 146 | useSSRContext, 147 | useShadowRoot, 148 | useSlots, 149 | useTemplateRef, 150 | useTransitionState, 151 | vModelCheckbox, 152 | vModelDynamic, 153 | vModelRadio, 154 | vModelSelect, 155 | vModelText, 156 | vShow, 157 | version, 158 | warn, 159 | watch, 160 | watchEffect, 161 | watchPostEffect, 162 | watchSyncEffect, 163 | withAsyncContext, 164 | withCtx, 165 | withDefaults, 166 | withDirectives, 167 | withKeys, 168 | withMemo, 169 | withModifiers, 170 | withScopeId 171 | } from "./chunk-E3XMU3BF.js"; 172 | export { 173 | BaseTransition, 174 | BaseTransitionPropsValidators, 175 | Comment, 176 | DeprecationTypes, 177 | EffectScope, 178 | ErrorCodes, 179 | ErrorTypeStrings, 180 | Fragment, 181 | KeepAlive, 182 | ReactiveEffect, 183 | Static, 184 | Suspense, 185 | Teleport, 186 | Text, 187 | TrackOpTypes, 188 | Transition, 189 | TransitionGroup, 190 | TriggerOpTypes, 191 | VueElement, 192 | assertNumber, 193 | callWithAsyncErrorHandling, 194 | callWithErrorHandling, 195 | camelize, 196 | capitalize, 197 | cloneVNode, 198 | compatUtils, 199 | compile, 200 | computed, 201 | createApp, 202 | createBlock, 203 | createCommentVNode, 204 | createElementBlock, 205 | createBaseVNode as createElementVNode, 206 | createHydrationRenderer, 207 | createPropsRestProxy, 208 | createRenderer, 209 | createSSRApp, 210 | createSlots, 211 | createStaticVNode, 212 | createTextVNode, 213 | createVNode, 214 | customRef, 215 | defineAsyncComponent, 216 | defineComponent, 217 | defineCustomElement, 218 | defineEmits, 219 | defineExpose, 220 | defineModel, 221 | defineOptions, 222 | defineProps, 223 | defineSSRCustomElement, 224 | defineSlots, 225 | devtools, 226 | effect, 227 | effectScope, 228 | getCurrentInstance, 229 | getCurrentScope, 230 | getCurrentWatcher, 231 | getTransitionRawChildren, 232 | guardReactiveProps, 233 | h, 234 | handleError, 235 | hasInjectionContext, 236 | hydrate, 237 | hydrateOnIdle, 238 | hydrateOnInteraction, 239 | hydrateOnMediaQuery, 240 | hydrateOnVisible, 241 | initCustomFormatter, 242 | initDirectivesForSSR, 243 | inject, 244 | isMemoSame, 245 | isProxy, 246 | isReactive, 247 | isReadonly, 248 | isRef, 249 | isRuntimeOnly, 250 | isShallow, 251 | isVNode, 252 | markRaw, 253 | mergeDefaults, 254 | mergeModels, 255 | mergeProps, 256 | nextTick, 257 | normalizeClass, 258 | normalizeProps, 259 | normalizeStyle, 260 | onActivated, 261 | onBeforeMount, 262 | onBeforeUnmount, 263 | onBeforeUpdate, 264 | onDeactivated, 265 | onErrorCaptured, 266 | onMounted, 267 | onRenderTracked, 268 | onRenderTriggered, 269 | onScopeDispose, 270 | onServerPrefetch, 271 | onUnmounted, 272 | onUpdated, 273 | onWatcherCleanup, 274 | openBlock, 275 | popScopeId, 276 | provide, 277 | proxyRefs, 278 | pushScopeId, 279 | queuePostFlushCb, 280 | reactive, 281 | readonly, 282 | ref, 283 | registerRuntimeCompiler, 284 | render, 285 | renderList, 286 | renderSlot, 287 | resolveComponent, 288 | resolveDirective, 289 | resolveDynamicComponent, 290 | resolveFilter, 291 | resolveTransitionHooks, 292 | setBlockTracking, 293 | setDevtoolsHook, 294 | setTransitionHooks, 295 | shallowReactive, 296 | shallowReadonly, 297 | shallowRef, 298 | ssrContextKey, 299 | ssrUtils, 300 | stop, 301 | toDisplayString, 302 | toHandlerKey, 303 | toHandlers, 304 | toRaw, 305 | toRef, 306 | toRefs, 307 | toValue, 308 | transformVNodeArgs, 309 | triggerRef, 310 | unref, 311 | useAttrs, 312 | useCssModule, 313 | useCssVars, 314 | useHost, 315 | useId, 316 | useModel, 317 | useSSRContext, 318 | useShadowRoot, 319 | useSlots, 320 | useTemplateRef, 321 | useTransitionState, 322 | vModelCheckbox, 323 | vModelDynamic, 324 | vModelRadio, 325 | vModelSelect, 326 | vModelText, 327 | vShow, 328 | version, 329 | warn, 330 | watch, 331 | watchEffect, 332 | watchPostEffect, 333 | watchSyncEffect, 334 | withAsyncContext, 335 | withCtx, 336 | withDefaults, 337 | withDirectives, 338 | withKeys, 339 | withMemo, 340 | withModifiers, 341 | withScopeId 342 | }; 343 | //# sourceMappingURL=vue.js.map 344 | -------------------------------------------------------------------------------- /docs/.vitepress/cache/deps/vue.js.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "sources": [], 4 | "sourcesContent": [], 5 | "mappings": "", 6 | "names": [] 7 | } 8 | -------------------------------------------------------------------------------- /docs/.vitepress/config.mjs: -------------------------------------------------------------------------------- 1 | import {defineConfig} from 'vitepress' 2 | 3 | // https://vitepress.dev/reference/site-config 4 | export default defineConfig({ 5 | lastUpdated: true, 6 | // ignoreDeadLinks: true, 7 | title: "Web-Dev-Beginner", 8 | description: "Quick start to front & back-end Dev", 9 | logo: '/assets/logo.png', 10 | footer: { 11 | message: '基于 MIT 许可发布', copyright: `版权所有 © 2024-${new Date().getFullYear()} Duke486` 12 | }, 13 | 14 | 15 | themeConfig: { 16 | editLink: { 17 | pattern: 'https://github.com/Duke486/Web-Dev-Beginner/edit/main/docs/:path'//这里需要修改为自己的仓库地址 18 | }, 19 | docFooter: { 20 | prev: '上一页', 21 | next: '下一页' 22 | }, 23 | outline: { 24 | label: '页面导航' 25 | }, 26 | lastUpdated: { 27 | text: '最后更新于', 28 | formatOptions: { 29 | dateStyle: 'short', 30 | timeStyle: 'medium' 31 | } 32 | }, 33 | 34 | 35 | search: { 36 | provider: 'local' 37 | }, // https://vitepress.dev/reference/default-theme-config 38 | 39 | 40 | nav: [ 41 | {text: '主页', link: '/'}, 42 | {text: '时间表', link: '/schedule'}, 43 | {text: 'Github仓库', link: 'https://github.com/Duke486/Web-Dev-Beginner'}, 44 | ], 45 | 46 | sidebar: [ 47 | { 48 | text: 'Guide', 49 | items: [ 50 | {text: '简介', link: '/intro'}, 51 | {text: '时间表', link: '/schedule'}, 52 | {text: '基础知识', link: '/basic'}, 53 | {text: '准备工作', link: '/prepare'}, 54 | // {text: 'About',link: '/about'} 55 | 56 | ] 57 | }, 58 | { 59 | text: 'Week-1', 60 | items: [ 61 | {text: 'Doc', link: '/week-1/doc'}, 62 | {text: 'Lab', link: '/week-1/lab'}, 63 | {text: 'Homework', link: '/week-1/homework'}, 64 | ] 65 | }, 66 | // { 67 | // text: 'Week-2', 68 | // items: [ 69 | // {text: 'Doc', link: '/week-2/doc'}, 70 | // {text: 'Lab', link: '/week-2/lab'}, 71 | // {text: 'Homework', link: '/week-2/homework'}, 72 | // ] 73 | // }, 74 | // { 75 | // text: 'Week-3', 76 | // items: [ 77 | // {text: '前端Doc', link: '/week-3/前端doc'}, 78 | // {text: '前端Lab', link: '/week-3/前端lab'}, 79 | // {text: '前端Homework', link: '/week-3/前端homework'}, 80 | // {text: '后端Doc', link: '/week-3/后端doc'}, 81 | // {text: '后端Lab', link: '/week-3/后端lab'}, 82 | // {text: '后端Homework', link: '/week-3/后端homework'}, 83 | // ] 84 | // }, 85 | // { 86 | // text: 'Week-4', 87 | // items: [ 88 | // {text: '前端Doc', link: '/week-4/前端doc'}, 89 | // {text: '前端Lab', link: '/week-4/前端lab'}, 90 | // {text: '前端Homework', link: '/week-4/前端homework'}, 91 | // {text: '后端Doc', link: '/week-4/后端doc'}, 92 | // {text: '后端Lab', link: '/week-4/后端lab'}, 93 | // {text: '后端Homework', link: '/week-4/后端homework'}, 94 | // ] 95 | // }, 96 | // { 97 | // text: 'Week-5', 98 | // items: [ 99 | // {text: '前端Doc', link: '/week-5/前端doc'}, 100 | // {text: '前端Lab', link: '/week-5/前端lab'}, 101 | // {text: '前端Homework', link: '/week-5/前端homework'}, 102 | // {text: '后端Doc', link: '/week-5/后端doc'}, 103 | // {text: '后端Lab', link: '/week-5/后端lab'}, 104 | // {text: '后端Homework', link: '/week-5/后端homework'}, 105 | // ] 106 | // }, 107 | // { 108 | // text: 'Week-6', 109 | // items: [ 110 | // {text: '前端Doc', link: '/week-6/前端doc'}, 111 | // {text: '前端Lab', link: '/week-6/前端lab'}, 112 | // {text: '前端Homework', link: '/week-6/前端homework'}, 113 | // {text: '后端Doc', link: '/week-6/后端doc'}, 114 | // {text: '后端Lab', link: '/week-6/后端lab'}, 115 | // {text: '后端Homework', link: '/week-6/后端homework'}, 116 | // ] 117 | // }, 118 | // { 119 | // text: 'Week-7', 120 | // items: [ 121 | // {text: 'Doc', link: '/week-7/doc'}, 122 | // {text: 'Lab', link: '/week-7/lab'}, 123 | // ] 124 | // }, 125 | // { 126 | // text: 'Week-8', 127 | // items: [ 128 | // {text: '前端', link: '/week-8/前端.md'}, 129 | // {text: '后端', link: '/week-8/后端.md'}, 130 | // ] 131 | // }, 132 | 133 | 134 | ], 135 | 136 | socialLinks: [{icon: 'github', link: 'https://github.com/Duke486/Web-Dev-Beginner'}//这里需要修改为自己的仓库地址 137 | ] 138 | } 139 | }) 140 | 141 | 142 | -------------------------------------------------------------------------------- /docs/about.md: -------------------------------------------------------------------------------- 1 | --- 2 | lastUpdated: 2025-3-18 3 | editLink: true 4 | --- 5 | 6 | # 出发，前进 7 | 8 | 欢迎，这里是 Duke486 的个人项目在线阅读网站。您可以在[博客主页](https://duke486.com/)上面找到[我](https://duke486.com/about/)! 9 | 10 | 本项目在[Github](https://github.com/Duke486/Web-Dev-Beginner)上开源，同时修订后在[杭电wiki](https://hdu-cs.wiki/)发布，喜欢的话请点亮Star哦。 11 | -------------------------------------------------------------------------------- /docs/api-examples.md: -------------------------------------------------------------------------------- 1 | --- 2 | outline: deep 3 | --- 4 | 5 | # Runtime API Examples 6 | 7 | This page demonstrates usage of some of the runtime APIs provided by VitePress. 8 | 9 | The main `useData()` API can be used to access site, theme, and page data for the current page. It works in both `.md` and `.vue` files: 10 | 11 | ```md 12 | 17 | 18 | ## Results 19 | 20 | ### Theme Data 21 | 
{{ theme }}
22 | 23 | ### Page Data 24 | 
{{ page }}
25 | 26 | ### Page Frontmatter 27 | 
{{ frontmatter }}
28 | ``` 29 | 30 | 35 | 36 | ## Results 37 | 38 | ### Theme Data 39 | 
{{ theme }}
40 | 41 | ### Page Data 42 | 
{{ page }}
43 | 44 | ### Page Frontmatter 45 | 
{{ frontmatter }}
46 | 47 | ## More 48 | 49 | Check out the documentation for the [full list of runtime APIs](https://vitepress.dev/reference/runtime-api#usedata). 50 | -------------------------------------------------------------------------------- /docs/assets/AobaAsk.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Duke486/Web-Dev-Beginner/66d659aa151f16e63da52cf4056b83a0320926c2/docs/assets/AobaAsk.jpg -------------------------------------------------------------------------------- /docs/assets/AobaSuzukaze.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Duke486/Web-Dev-Beginner/66d659aa151f16e63da52cf4056b83a0320926c2/docs/assets/AobaSuzukaze.png -------------------------------------------------------------------------------- /docs/assets/git.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Duke486/Web-Dev-Beginner/66d659aa151f16e63da52cf4056b83a0320926c2/docs/assets/git.jpg -------------------------------------------------------------------------------- /docs/assets/html.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Duke486/Web-Dev-Beginner/66d659aa151f16e63da52cf4056b83a0320926c2/docs/assets/html.jpg -------------------------------------------------------------------------------- /docs/assets/image-20240929204815-t2wjf0h.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Duke486/Web-Dev-Beginner/66d659aa151f16e63da52cf4056b83a0320926c2/docs/assets/image-20240929204815-t2wjf0h.png -------------------------------------------------------------------------------- /docs/assets/image-20240929211337-vvvpqdu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Duke486/Web-Dev-Beginner/66d659aa151f16e63da52cf4056b83a0320926c2/docs/assets/image-20240929211337-vvvpqdu.png -------------------------------------------------------------------------------- /docs/assets/image-20241028194512-55jdmsb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Duke486/Web-Dev-Beginner/66d659aa151f16e63da52cf4056b83a0320926c2/docs/assets/image-20241028194512-55jdmsb.png -------------------------------------------------------------------------------- /docs/assets/image-20241028201205-q7xso1s.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Duke486/Web-Dev-Beginner/66d659aa151f16e63da52cf4056b83a0320926c2/docs/assets/image-20241028201205-q7xso1s.png -------------------------------------------------------------------------------- /docs/assets/image-20241028201443-b2ncv3a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Duke486/Web-Dev-Beginner/66d659aa151f16e63da52cf4056b83a0320926c2/docs/assets/image-20241028201443-b2ncv3a.png -------------------------------------------------------------------------------- /docs/assets/image-20241028201929-zd0i0kd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Duke486/Web-Dev-Beginner/66d659aa151f16e63da52cf4056b83a0320926c2/docs/assets/image-20241028201929-zd0i0kd.png -------------------------------------------------------------------------------- /docs/assets/image-20241112195309-fxj1l3k.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Duke486/Web-Dev-Beginner/66d659aa151f16e63da52cf4056b83a0320926c2/docs/assets/image-20241112195309-fxj1l3k.png -------------------------------------------------------------------------------- /docs/assets/image-20241112195626-uanlg4k.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Duke486/Web-Dev-Beginner/66d659aa151f16e63da52cf4056b83a0320926c2/docs/assets/image-20241112195626-uanlg4k.png -------------------------------------------------------------------------------- /docs/assets/image-20241112195830-d9hh5n9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Duke486/Web-Dev-Beginner/66d659aa151f16e63da52cf4056b83a0320926c2/docs/assets/image-20241112195830-d9hh5n9.png -------------------------------------------------------------------------------- /docs/assets/image-20241112195953-n5t5tmn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Duke486/Web-Dev-Beginner/66d659aa151f16e63da52cf4056b83a0320926c2/docs/assets/image-20241112195953-n5t5tmn.png -------------------------------------------------------------------------------- /docs/assets/image-20241112200712-fhiedlb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Duke486/Web-Dev-Beginner/66d659aa151f16e63da52cf4056b83a0320926c2/docs/assets/image-20241112200712-fhiedlb.png -------------------------------------------------------------------------------- /docs/assets/image-20241112200752-wur6w58.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Duke486/Web-Dev-Beginner/66d659aa151f16e63da52cf4056b83a0320926c2/docs/assets/image-20241112200752-wur6w58.png -------------------------------------------------------------------------------- /docs/assets/image-20241119183520-dogzsvx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Duke486/Web-Dev-Beginner/66d659aa151f16e63da52cf4056b83a0320926c2/docs/assets/image-20241119183520-dogzsvx.png -------------------------------------------------------------------------------- /docs/assets/image-20241119184117-ujv9wu9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Duke486/Web-Dev-Beginner/66d659aa151f16e63da52cf4056b83a0320926c2/docs/assets/image-20241119184117-ujv9wu9.png -------------------------------------------------------------------------------- /docs/assets/image-20241119191725-kexcq95.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Duke486/Web-Dev-Beginner/66d659aa151f16e63da52cf4056b83a0320926c2/docs/assets/image-20241119191725-kexcq95.png -------------------------------------------------------------------------------- /docs/assets/image-20241119191741-9jiwwlw.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Duke486/Web-Dev-Beginner/66d659aa151f16e63da52cf4056b83a0320926c2/docs/assets/image-20241119191741-9jiwwlw.png -------------------------------------------------------------------------------- /docs/assets/image-20241203221742-1m7716q.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Duke486/Web-Dev-Beginner/66d659aa151f16e63da52cf4056b83a0320926c2/docs/assets/image-20241203221742-1m7716q.png -------------------------------------------------------------------------------- /docs/assets/image-20241203225449-ghlmqno.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Duke486/Web-Dev-Beginner/66d659aa151f16e63da52cf4056b83a0320926c2/docs/assets/image-20241203225449-ghlmqno.png -------------------------------------------------------------------------------- /docs/assets/image-20241203232937-wcyv1we.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Duke486/Web-Dev-Beginner/66d659aa151f16e63da52cf4056b83a0320926c2/docs/assets/image-20241203232937-wcyv1we.png -------------------------------------------------------------------------------- /docs/assets/image-20241211105509-wmmh2bb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Duke486/Web-Dev-Beginner/66d659aa151f16e63da52cf4056b83a0320926c2/docs/assets/image-20241211105509-wmmh2bb.png -------------------------------------------------------------------------------- /docs/assets/image-20241225181748-vlgccpr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Duke486/Web-Dev-Beginner/66d659aa151f16e63da52cf4056b83a0320926c2/docs/assets/image-20241225181748-vlgccpr.png -------------------------------------------------------------------------------- /docs/assets/image-20241225182908-7e0hdi4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Duke486/Web-Dev-Beginner/66d659aa151f16e63da52cf4056b83a0320926c2/docs/assets/image-20241225182908-7e0hdi4.png -------------------------------------------------------------------------------- /docs/assets/image-20241225183028-jg2cf77.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Duke486/Web-Dev-Beginner/66d659aa151f16e63da52cf4056b83a0320926c2/docs/assets/image-20241225183028-jg2cf77.png -------------------------------------------------------------------------------- /docs/assets/image-20241225183620-fec45za.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Duke486/Web-Dev-Beginner/66d659aa151f16e63da52cf4056b83a0320926c2/docs/assets/image-20241225183620-fec45za.png -------------------------------------------------------------------------------- /docs/assets/image-20241225183721-i6ux1uu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Duke486/Web-Dev-Beginner/66d659aa151f16e63da52cf4056b83a0320926c2/docs/assets/image-20241225183721-i6ux1uu.png -------------------------------------------------------------------------------- /docs/assets/image-20241225183853-bdyp9d2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Duke486/Web-Dev-Beginner/66d659aa151f16e63da52cf4056b83a0320926c2/docs/assets/image-20241225183853-bdyp9d2.png -------------------------------------------------------------------------------- /docs/assets/image-20241225184740-qlqkm99.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Duke486/Web-Dev-Beginner/66d659aa151f16e63da52cf4056b83a0320926c2/docs/assets/image-20241225184740-qlqkm99.png -------------------------------------------------------------------------------- /docs/assets/image-20241225203944-3qlf3yl.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Duke486/Web-Dev-Beginner/66d659aa151f16e63da52cf4056b83a0320926c2/docs/assets/image-20241225203944-3qlf3yl.png -------------------------------------------------------------------------------- /docs/assets/image-20241225205751-wl74gjl.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Duke486/Web-Dev-Beginner/66d659aa151f16e63da52cf4056b83a0320926c2/docs/assets/image-20241225205751-wl74gjl.png -------------------------------------------------------------------------------- /docs/assets/image-20241225205943-gf22qtm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Duke486/Web-Dev-Beginner/66d659aa151f16e63da52cf4056b83a0320926c2/docs/assets/image-20241225205943-gf22qtm.png -------------------------------------------------------------------------------- /docs/assets/image-20241225211009-3p2zohh.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Duke486/Web-Dev-Beginner/66d659aa151f16e63da52cf4056b83a0320926c2/docs/assets/image-20241225211009-3p2zohh.png -------------------------------------------------------------------------------- /docs/assets/image-20241225211051-da0plta.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Duke486/Web-Dev-Beginner/66d659aa151f16e63da52cf4056b83a0320926c2/docs/assets/image-20241225211051-da0plta.png -------------------------------------------------------------------------------- /docs/assets/intro.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Duke486/Web-Dev-Beginner/66d659aa151f16e63da52cf4056b83a0320926c2/docs/assets/intro.jpg -------------------------------------------------------------------------------- /docs/assets/learnCS-20240929212226-b2s7e6d.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Duke486/Web-Dev-Beginner/66d659aa151f16e63da52cf4056b83a0320926c2/docs/assets/learnCS-20240929212226-b2s7e6d.jpg -------------------------------------------------------------------------------- /docs/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Duke486/Web-Dev-Beginner/66d659aa151f16e63da52cf4056b83a0320926c2/docs/assets/logo.png -------------------------------------------------------------------------------- /docs/basic.md: -------------------------------------------------------------------------------- 1 | # 基本知识 2 | 这篇快速指南的目标是帮助完全零基础的同学掌握最基本计算机知识，为后续的前后端开发课程打下扎实的基础。你将学习如何正确管理文件和目录，理解操作系统的权限结构，熟悉网络通信的基本概念，以及如何使用这些知识来更好地进行开发工作。 3 | 4 | 在深入学习前端和后端开发之前，这些看似基础的知识实际上都是必不可少的。理解这些基础知识可以帮助你更好地使用开发工具、配置环境、解决问题。因此，请务必认真阅读并逐步掌握每一个概念和操作。 5 | 6 | 7 | ## 1.文件与目录结构 8 | 9 | ### 1.1 目录和文件的基本概念 10 | 11 | 计算机中的文件和目录是开发工作中最基本的概念之一。目录（或称为文件夹）用于组织和管理计算机中的各种文件，类似于日常生活中的文件柜，而文件则是存放信息的容器，比如文本文件、图片、代码文件等。 12 | 13 | * 目录结构：目录结构类似于一棵倒置的树，根目录在顶部，下面分支出各个子目录和文件。通过这种结构可以清晰地组织计算机中的所有信息。 14 | 15 | 例如： 16 | 17 | ``` 18 | / (根目录) 19 | ├── home/ (用户目录) 20 | │ ├── user1/ (子目录) 21 | │ │ ├── Documents/ (文档文件夹) 22 | │ │ │ ├── report.docx (文档文件) 23 | │ │ ├── Projects/ (项目文件夹) 24 | │ │ ├── project1/ 25 | │ │ ├── project2/ 26 | │ ├── user2/ (另一个用户的目录) 27 | ``` 28 | 29 | 在这个例子中，`/` 是根目录，所有其他文件和目录都位于这个根目录之下。 30 | 31 | ### 1.2 绝对路径和相对路径 32 | 33 | 路径是指向文件或目录的位置，可以理解为文件的"地址"。路径有两种表示方法：绝对路径和相对路径。 34 | 35 | * 绝对路径：指从根目录开始，完整指明文件或目录的位置。例如，在 Linux 系统中，`/home/user1/Documents/report.docx` 就是一个绝对路径，它从根目录开始，指向 `report.docx` 这个文件。 36 | 37 | * Windows 示例：在 Windows 中，绝对路径类似于 `C:\Users\user1\Documents\report.docx`。请注意，Windows 中使用反斜杠 `\` 来分隔目录，而 Linux 使用正斜杠 `/`。 38 | * 相对路径：指从当前所在的目录出发，描述目标文件或目录的位置。相对路径基于当前的工作目录。例如，假设当前工作目录是 `/home/user1`，要访问 `Documents` 目录下的 `report.docx` 文件，可以使用相对路径 `Documents/report.docx`。 39 | 40 | 路径符号详解： 41 | 42 | * `.`：表示当前目录。例如，`./script.sh` 表示当前目录下的 `script.sh` 文件。 43 | * `..`：表示上一级目录。例如，`../Pictures/photo.jpg` 表示当前目录的上一级目录中的 `Pictures` 目录下的 `photo.jpg` 文件。 44 | 45 | :::tip 46 | 47 | 了解路径是进行任何文件操作的基础。特别是在使用命令行时，你必须清楚当前的工作目录，并能灵活地使用相对路径和绝对路径来操作文件。 48 | 49 | ::: 50 | 51 | ### 1.3 工作路径 (Working Directory) 52 | 53 | 工作路径是指当前命令行操作所在的目录，所有相对路径的操作都基于这个路径。你可以使用不同的命令查看和更改当前的工作路径： 54 | 55 | * Linux / macOS： 56 | 57 | * 使用 `pwd`（Print Working Directory）命令查看当前工作路径。 58 | * 使用 `cd`（Change Directory）命令更改工作路径。例如： 59 | 60 | ```bash 61 | pwd 62 | # 输出：/home/user1 63 | cd Documents 64 | pwd 65 | # 输出：/home/user1/Documents 66 | ``` 67 | * 想要回到上一级目录，使用： 68 | 69 | ```bash 70 | cd .. 71 | ``` 72 | * Windows： 73 | 74 | * 使用 `cd` 命令查看和切换工作目录。例如： 75 | 76 | ```cmd 77 | cd C:\Users\user1\Documents 78 | ``` 79 | * 使用 `dir` 查看当前目录下的所有文件和文件夹。 80 | * 想要回到上一级目录，使用： 81 | 82 | ```cmd 83 | cd .. 84 | ``` 85 | 86 | :::info 87 | 88 | 很多初学者在使用命令行进行开发时，忽略了工作路径的重要性，导致在不恰当的目录中执行操作，尤其是在初始化 Git 仓库时，可能会导致整个系统目录被错误管理，带来很大的混乱。因此，每次操作前请务必确认当前的工作路径是否正确。 89 | 90 | ::: 91 | 92 | ### 1.4 项目文件的组织和规范 93 | 94 | 在开发过程中，项目的文件和目录结构一定要规范且有条理。这不仅能提高代码的可读性，也方便其他开发人员理解你的项目结构。 95 | 96 | 项目文件夹的建议结构： 97 | 98 | * 根目录：项目的主目录，包含所有子文件和子目录。 99 | * 常见子目录： 100 | 101 | * `assets`：静态资源文件夹，如图片、字体、图标等。 102 | * `public`：公开资源，通常包含需要直接被用户访问的文件。 103 | * `styles`：样式文件夹，存放 CSS 文件。 104 | * `src`：项目的源代码，包括前端的 JavaScript 或后端的代码。 105 | * `dist` 或 `build`：编译或打包后的文件目录，通常用于发布项目。 106 | 107 | :::tip 108 | 109 | * 文件命名应使用有意义的英文名称，避免使用中文和空格。 110 | * 路径尽量简洁明了，便于记忆和使用。例如，`assets/images/logo.png` 比 `a/1.png` 更容易理解。 111 | * 112 | ::: 113 | 114 | :::warning 115 | 116 | 在开发过程中，请务必避免将系统目录（例如桌面、C 盘等）初始化为 Git 仓库，因为这会将这些目录中的所有文件都纳入版本控制，导致文件难以管理。 117 | 118 | ::: 119 | 120 | --- 121 | 122 | ## 2.操作系统权限管理 123 | 124 | ### 2.1 用户权限和管理员权限 125 | 126 | 操作系统中的文件和资源通常受到权限的管理，这种管理可以防止未经授权的用户对系统进行更改。普通用户和管理员用户拥有不同的权限级别： 127 | 128 | * 普通用户权限：只能对用户自己创建的文件和资源进行操作。 129 | * 管理员权限：可以管理整个系统的文件和资源，修改系统设置，安装软件等。 130 | 131 | 在 Linux 中，`sudo` 是用来临时提升权限的命令。例如，你可以使用 `sudo` 安装软件： 132 | 133 | ```bash 134 | sudo apt-get install git 135 | ``` 136 | 137 | 这个命令会要求你输入密码，然后以管理员权限运行安装命令。 138 | 139 | 在 Windows 中，管理员权限通常需要右键点击应用程序并选择“以管理员身份运行”，或者在出现 UAC 提示时选择确认。 140 | 141 | ### 2.2 如何应对权限不足的问题 142 | 143 | 当你在进行一些需要更高权限的操作时，可能会遇到Permission Denied 错误。这时候可以考虑以下解决办法： 144 | 145 | * 在 Linux 系统中，使用 `sudo` 提升权限。 146 | * 在 Windows 系统中，右键程序并选择“以管理员身份运行”。 147 | 148 | :::warning 149 | 150 | 不要轻易使用管理员权限。权限越大，责任越大。管理员权限错误的操作可能会导致系统文件被意外删除或损坏。因此，除非绝对必要，否则尽量避免使用管理员权限。 151 | 152 | ::: 153 | 154 | --- 155 | 156 | ## 3.网络通信基础知识 157 | 158 | ### 3.1 网络通信的概述 159 | 160 | 网络通信是指通过互联网在设备之间传递数据的过程。在开发过程中，你将会遇到各种类型的网络通信协议，比如 HTTP、HTTPS、FTP、SMTP 等。 161 | 162 | 每当你在浏览器中输入一个网址时，实际上是在向服务器发送一个请求。服务器接收到请求后，会根据请求内容返回相应的数据。这就是网络通信的基本过程。 163 | 164 | 网络通信的核心概念包括客户端、服务器和协议。 165 | 166 | * 客户端：发出请求的一方，比如你的电脑、手机或浏览器。 167 | * 服务器：接收请求并作出响应的一方，通常是存放网页和数据的远程计算机。 168 | * 协议：用于规范客户端和服务器之间如何交流的规则和标准，比如 HTTP、HTTPS 等。 169 | 170 | 网络协议在互联网的通信中起着至关重要的作用，它们确保了客户端和服务器之间的数据交换是可靠、有效和一致的。HTTP 就是我们在 Web 开发中最常接触到的协议之一。 171 | 172 | 3.2 HTTP 请求的构成 ((20241104153034-m54pnhz "*")) 173 | 174 | HTTP（Hypertext Transfer Protocol） 是一种用于客户端与服务器之间进行通信的协议。在 Web 开发中，你将不断地与 HTTP 请求和响应打交道。 175 | 176 | HTTP 请求通常由以下几部分组成： 177 | 178 | * 请求行：请求行包含请求方法、目标 URL 和协议版本。 179 | 180 | * 请求方法：例如 GET（获取资源）、POST（提交数据）、PUT（更新资源）和 DELETE（删除资源）。 181 | * 目标 URL：表示所请求的资源位置。 182 | * 协议版本：例如 HTTP/1.1、HTTP/2 等。 183 | 184 | 例如： 185 | 186 | ``` 187 | GET /index.html HTTP/1.1 188 | ``` 189 | 190 | 这表示使用 GET 方法请求服务器的 `/index.html` 页面。 191 | * 请求头 (Headers)：请求头携带了关于请求的额外信息，例如浏览器类型、用户代理、接受的数据类型等。 192 | 193 | * 例如： 194 | 195 | ``` 196 | User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) 197 | Accept: text/html,application/xhtml+xml,application/xml 198 | ``` 199 | * 请求体 (Body)：请求体包含了要发送给服务器的数据，通常在 POST、PUT 等方法中使用。例如当你在一个网站上填写表单并点击提交时，数据就会通过请求体发送到服务器。 200 | 201 | HTTP 响应 包含服务器返回给客户端的信息，通常包括以下几部分： 202 | 203 | * 状态行：状态行包含状态码和状态描述。 204 | 205 | * 状态码：例如 200（OK，表示请求成功）、404（Not Found，表示资源未找到）、500（Internal Server Error，表示服务器错误）。 206 | 207 | 例如： 208 | 209 | ``` 210 | HTTP/1.1 200 OK 211 | ``` 212 | * 响应头 (Headers)：响应头提供了关于响应的一些信息，例如服务器类型、数据格式等。 213 | * 响应体 (Body)：响应体包含了请求的资源内容，例如网页的 HTML 代码、图片数据等。 214 | 215 | ### 3.3 代理工具的工作原理 216 | 217 | 在开发过程中，特别是调试网络请求时，你可能会使用代理工具来帮助访问某些受限的网站或者测试网络请求的行为。代理服务器是一种中间服务器，它可以代表你的设备向互联网发送请求。 218 | 219 | 代理工具的工作原理是：当你通过代理服务器访问互联网时，代理服务器会替你发送请求并返回响应，从而隐藏你的真实 IP 地址并绕过某些网络限制。 220 | 221 | TUN 模式与普通代理模式的区别： 222 | 223 | * TUN 模式： 224 | 225 | * TUN 模式通过操作系统的网络层实现数据包的重定向，相当于在系统中建立一个虚拟的网络适配器，能够拦截系统中的所有网络流量。因此，TUN 模式可以代理所有应用程序的流量，而不只是支持代理设置的应用程序。 226 | * TUN 模式的实现比较复杂，通常需要系统的深度集成，因此需要管理员权限来配置虚拟网卡。 227 | * 系统代理模式： 228 | 229 | * 系统代理模式是在操作系统中设置一个代理服务器地址，只有支持代理设置的应用程序（例如浏览器）会通过代理服务器进行数据通信。 230 | * 使用系统代理模式时，很多系统级应用和不支持代理设置的应用不会受到影响，例如终端中的 `curl` 命令默认情况下并不会通过系统代理。 231 | 232 | 注意事项： 233 | 234 | * 在使用代理工具时，代理可能会干扰本地服务器的运行，例如本地开发服务器的请求可能会被代理截获，导致访问失败。 235 | * 在安装一些依赖包或工具时如果出现SSL或者握手错误，建议关闭代理，以避免由于代理设置导致的连接问题。 236 | 237 | :::info 238 | 239 | 在使用代理工具时，请务必注意其影响和使用权限，确保它们不会干扰你当前的开发步骤。 240 | 241 | ::: 242 | 243 | --- 244 | 245 | ## 4.提问的智慧与学习技巧 246 | 247 | ### 4.1 善用搜索引擎 248 | 249 | 作为开发人员，你需要不断学习和解决各种问题，而搜索引擎是你最强大的工具之一。掌握如何有效地使用搜索引擎可以让你事半功倍。 250 | 251 | 如何有效地使用搜索引擎： 252 | 253 | * 明确描述问题：用清晰的语句描述你遇到的问题。例如，“如何在 Linux 中安装 Node.js” 比“安装 Node.js”更能帮助你找到精确的答案。 254 | * 善于提取关键词：例如，遇到权限问题时，可以使用“Linux 权限不足 sudo”这样的关键词快速找到相关解决办法。 255 | * 搜索特定错误代码：如果程序输出了错误代码，直接将错误代码和相关信息复制到搜索引擎中进行搜索，往往可以找到别人遇到过类似问题的解决方案。 256 | * 使用限定符：可以使用限定符来精确搜索。例如，使用 `site:stackoverflow.com` 可以限定搜索结果来自 Stack Overflow。 257 | 258 | 259 | 解决问题前先搜索，不要害怕查阅各种文档和论坛，这不仅可以帮助你更快解决问题，还能增长你的知识。 260 | 261 | ### 4.2 提问的智慧 262 | 263 | 在编程社区中，提出一个好的问题非常重要。一个好的问题不仅可以帮助别人快速理解你的困境，还能让你更快得到高质量的解答。 264 | 265 | 提出高质量问题的要点： 266 | 267 | * 描述清楚问题背景：提供足够的背景信息，例如你在做什么、遇到了什么问题、以及你希望实现什么目标。 268 | * 展示尝试过的解决办法：列出你尝试过的解决方法，以及它们为什么没有奏效。这样可以避免他人重复你已经尝试过的步骤。 269 | * 简洁明了：问题要简洁明了，不要包含无关的细节。确保别人能一眼看懂你的问题核心。 270 | 271 | ### 4.3 AI 工具的使用与限制 272 | 273 | AI 工具可以在学习和开发中提供很大的帮助，但你必须正确使用它们，尤其是在学习的初期。 274 | 275 | AI 工具的优势： 276 | 277 | * 可以为你提供编程代码的模板、错误的调试思路，甚至帮你解释某些复杂概念。 278 | * 在遇到困境时，它们可以为你提供一些突破的方向。 279 | 280 | AI 工具的限制： 281 | 282 | * 在初学阶段，过度依赖 AI 工具替你完成代码编写，会影响你对基础知识的掌握。你需要深入理解每一个代码片段，而不仅仅是把它们当成“黑盒”来使用。 283 | * AI 工具可能会给出错误或不适合当前场景的建议，因此你必须对它的回答进行批判性地思考。 284 | 285 | :::tip 286 | 287 | AI 工具是辅助学习的工具，而不是学习的替代品。尝试理解工具给出的答案，并自己实践，才能真正掌握编程技能。 288 | 289 | ::: 290 | 291 | --- 292 | 293 | ## 总结 294 | 295 | * 知识点总结：对于每个章节中的知识点，请花时间复习并进行实践操作。 296 | * 推荐阅读与学习资源链接： 297 | 298 | * [MDN Web Docs](https://developer.mozilla.org/) 299 | * [W3Schools](https://www.w3schools.com/) 300 | * [Stack Overflow](https://stackoverflow.com/) 301 | * 常见问题解答 (FAQ) 302 | 303 | Q1: 为什么我的终端提示“Permission Denied”？ 304 | 305 | * A: 这是因为你没有足够的权限来执行某些操作。在 Linux 系统中，可以尝试使用 `sudo` 提升权限。在 Windows 中，尝试右键以管理员身份运行。 306 | 307 | Q2: 为什么 Git 提示我在错误的目录初始化仓库？ 308 | 309 | * A: 你可能在系统目录（如桌面或根目录）中初始化了 Git 仓库。确保在你的项目文件夹中执行 `git init`，而不是在系统目录。 310 | 311 | Q3: TUN 模式和普通代理有什么区别？ 312 | 313 | * A: TUN 模式是在系统层面重定向所有流量，而普通代理只对特定应用有效。TUN 模式需要系统权限，能够代理所有网络请求。 314 | 315 | Q4: 我该如何解决 npm 安装依赖时的网络问题？ 316 | 317 | * A: 可能是代理工具干扰了连接，建议关闭代理再进行安装。另外，使用国内镜像源（如 `cnpm` 或 `yarn` 的淘宝镜像）也可以提升安装速度。 318 | 319 | Q5: 为什么我使用相对路径找不到文件？ 320 | 321 | * A: 请确认当前的工作路径是否正确，可以通过 `pwd`（Linux/macOS）或 `cd`（Windows）查看。如果工作路径不对，使用 `cd` 切换到正确的目录。 -------------------------------------------------------------------------------- /docs/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | # https://vitepress.dev/reference/default-theme-home-page 3 | layout: home 4 | 5 | hero: 6 | name: "Web-Dev-Beginner" 7 | text: "Quick start to front & back-end Dev" 8 | tagline: 本课程旨在通过动手实践，从零基础开始快速学习前端和后端开发。 9 | actions: 10 | - theme: brand 11 | text: Get Started 12 | link: /intro 13 | - theme: alt 14 | text: About 15 | link: /about 16 | image: 17 | src: /logo.png 18 | alt: Logo 19 | 20 | features: 21 | - title: 从零开始 22 | details: 无需任何基础，课程将从最基础的概念开始，逐步引导您学习Web开发。 23 | - title: 体验友好 24 | details: 通过理论和实践相结合的方式，引导您从基础概念到高级Web开发技术。 25 | - title: 注重实践 26 | details: 通过Lab，您将学习如何应用所学知识，从而更好地理解和掌握技术。 27 | --- 28 | 49 | 50 | -------------------------------------------------------------------------------- /docs/intro.md: -------------------------------------------------------------------------------- 1 | # Web-Dev-Beginner课程介绍 2 | ![image](./assets/intro.jpg) 3 | ## 课程性质 4 | 本课程旨在帮助零基础的新生快速上手前端和后端开发，通过循序渐进的学习方式，从HTML、CSS、JavaScript等基础知识入手，逐步过渡到实际前后端开发中常用的框架与技术，如Vue3、Express等。本课程强调实践性，学生将在动手过程中学习，培养开发能力。 5 | 6 | ## 课程简介 7 | 本课程为期10周，分为两个部分：前两周全体学生共同学习前端基础（HTML、CSS、JavaScript）及版本控制工具（Git、GitHub协作），后八周分为**前端组**与**后端组**，根据各自方向深入学习对应的技术栈。课程每周包含： 8 | - **Doc**：理论讲解，介绍每周的核心知识点 9 | - **Lab**：动手实验，通过实际项目增强理解 10 | - **Homework**：独立作业，巩固学习内容 11 | 12 | 课程的目标是通过10周的学习，让学生能够使用现代前后端技术开发出带有登录功能、导航的前端页面和具备简单数据存储、查询能力的后端API。 13 | 14 | ## 学习要求 15 | - **积极动手**：本课程非常注重实践，建议同学们认真完成每周的Lab实验，并积极参与到作业中。 16 | - **掌握基础**：虽然课程不要求深入理解复杂的计算机理论，但前两周的基础内容至关重要，为后续框架学习打下基础。 17 | - **协作与版本控制**：课程中Git和GitHub将是你提交作业与协作开发的主要工具，请在课程中熟练掌握它们的使用。 18 | 19 | ## 如何使用时间表 20 | 课程时间表将每周的学习内容分为三个部分：**Doc** 理论学习、**Lab** 实验、**Homework** 作业。你可以根据时间表安排自己的学习进度，合理分配学习和实验的时间。建议每周至少花费4-6小时完成学习任务。 21 | 22 | -------------------------------------------------------------------------------- /docs/markdown-examples.md: -------------------------------------------------------------------------------- 1 | # Markdown Extension Examples 2 | 3 | This page demonstrates some of the built-in markdown extensions provided by VitePress. 4 | 5 | ## Syntax Highlighting 6 | 7 | VitePress provides Syntax Highlighting powered by [Shiki](https://github.com/shikijs/shiki), with additional features like line-highlighting: 8 | 9 | **Input** 10 | 11 | ````md 12 | ```js{4} 13 | export default { 14 | data () { 15 | return { 16 | msg: 'Highlighted!' 17 | } 18 | } 19 | } 20 | ``` 21 | ```` 22 | 23 | **Output** 24 | 25 | ```js{4} 26 | export default { 27 | data () { 28 | return { 29 | msg: 'Highlighted!' 30 | } 31 | } 32 | } 33 | ``` 34 | 35 | ## Custom Containers 36 | 37 | **Input** 38 | 39 | ```md 40 | ::: info 41 | This is an info box. 42 | ::: 43 | 44 | ::: tip 45 | This is a tip. 46 | ::: 47 | 48 | ::: warning 49 | This is a warning. 50 | ::: 51 | 52 | ::: danger 53 | This is a dangerous warning. 54 | ::: 55 | 56 | ::: details 57 | This is a details block. 58 | ::: 59 | ``` 60 | 61 | **Output** 62 | 63 | ::: info 64 | This is an info box. 65 | ::: 66 | 67 | ::: tip 68 | This is a tip. 69 | ::: 70 | 71 | ::: warning 72 | This is a warning. 73 | ::: 74 | 75 | ::: danger 76 | This is a dangerous warning. 77 | ::: 78 | 79 | ::: details 80 | This is a details block. 81 | ::: 82 | 83 | ## More 84 | 85 | Check out the documentation for the [full list of markdown extensions](https://vitepress.dev/guide/markdown). 86 | -------------------------------------------------------------------------------- /docs/prepare.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # 环境安装与编程基础 4 | ![image](assets/learnCS-20240929212226-b2s7e6d.jpg) 5 | 6 | 欢迎阅读 Web Dev Beginner 项目！本文档旨在帮助大家快速搭建开发环境，熟悉基本的工具和知识，为首次考核和后续开始开发做好准备。 7 | 8 | :::info 9 | 本文档涉及对开源项目或文档的部分引用，所有参考文档均基于MIT许可证开源并标注在[About页](/about.html)，在此一并表示感谢。本文档仅供学习交流使用，不涉及商业及宣传性质，如有侵权请通过About页联系删除。 10 | ::: 11 | 12 | --- 13 | 14 | 在开始学习前，请按照以下指导，**按顺序**完成准备工作。 15 | 16 | ## 入学霍格沃茨 17 | 18 | 学计算机知识和Web开发之前你需要先掌握一点魔法，虽然这让人感到麻烦但这是先决条件。有了这项技能之后环境的安装与包的下载将更加顺利。具体不方便展开，**哔哩哔哩**、**必应**或者**GPT镜像站**有答案，请自己使用搜索引擎研究。研究好后，务必谷歌搜索一下TUN模式如何打开。 19 | 20 | :::details 什么是"魔法"？ 21 | 代理上网是指通过代理服务器来访问互联网，代理服务器会代替你的电脑访问互联网，这样可以隐藏你的真实IP地址，保护你的隐私。代理服务器还可以加速访问速度，提高访问成功率。这通常可由多种协议实现，如HTTP、HTTPS、SOCKS、Shadowsocks、Vmss等。 22 | ::: 23 | 24 | 25 | 26 | :::warning 27 | 后续步骤依赖此步骤，请务必研究明白 28 | ::: 29 | 30 | ## 环境安装 31 | 32 | ### 1. 安装 Scoop 33 | 34 | Scoop 需要 PowerShell 作为运行环境。如果你用的是 Windows 10 及以上版本，系统里已经自带了 Windows PowerShell。但如果你还在用 Windows 7，它自带的 PowerShell 版本太旧了，需要你手动安装新版 PowerShell。你可以去微软官网搜索 `PowerShell 7` 进行安装。不过，建议升级到 Windows 10 及以上版本，目前很少有人还在使用 Windows 7。 35 | 36 | :::warning 37 | 很多同学在设置 Windows 用户时使用了中文用户名，导致了用户目录也变成了中文名。如果按照 Scoop 的默认方式将软件安装到用户目录下，可能会造成部分软件执行错误。所以这里推荐安装到自定义目录，如果需要其他安装方式请参考：[ScoopInstaller/Install](https://github.com/ScoopInstaller/Install) 38 | ::: 39 | 40 | :::tip 41 | 如何打开 Windows 终端： 42 | 43 | 1. 使用快捷键：按下 Win + X，然后选择 "Windows 终端" 或 "Windows 终端（管理员）"。 44 | 2. 通过开始菜单：点击左下角的 "开始" 按钮，搜索 "Windows 终端"，然后点击打开。 45 | 3. 右键菜单：在桌面或文件夹空白处右键，选择 "在 Windows 终端中打开" 46 | 47 | ::: 48 | 49 | 在终端里依次执行以下命令，井号开头的行不需要执行，这叫做注释。 50 | 51 | ```powershell 52 | # 设置 PowerShell 执行策略 53 | Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser 54 | # 下载安装脚本 55 | irm get.scoop.sh -outfile 'install.ps1' 56 | # 执行安装, --ScoopDir 参数指定 Scoop 安装路径 57 | .\install.ps1 -ScoopDir 'C:\Scoop' 58 | ``` 59 | 60 | 安装完成后，打开 **命令提示符** 或 **PowerShell**，输入以下命令检查是否安装成功： 61 | 62 | ```bash 63 | scoop --version 64 | ``` 65 | 66 | 如果输出 Scoop 的版本号，则说明安装成功。 67 | 68 | ### 2. 使用 Scoop 安装开发环境 69 | 70 | Scoop 可以自动为你安装常用的开发工具。接下来我们将依次安装 Python、Git、Node.js、Sudo。 71 | 72 | #### 步骤 1：安装 Python 73 | 74 | 1. 在 **命令提示符** 或 **PowerShell** 中执行以下命令： 75 | 76 | ```bash 77 | scoop install python 78 | ``` 79 | 2. 安装完成后，验证 Python 是否安装成功： 80 | 81 | ```bash 82 | python --version 83 | ``` 84 | :::tip 85 | 当你安装完新的软件，需要重新打开一个终端才能使用它的指令。后文中的所有version指令都是在新的终端中执行的。 86 | ::: 87 | #### 步骤 2：安装 Git 88 | 89 | 1. 执行以下命令安装 Git： 90 | 91 | ```bash 92 | scoop install git 93 | ``` 94 | 2. 安装完成后，检查 Git 是否成功安装： 95 | 96 | ```bash 97 | git --version 98 | ``` 99 | 100 | #### 步骤 3：安装 Node.js 101 | 102 | 1. 执行以下命令安装 Node.js： 103 | 104 | ```bash 105 | scoop install nodejs 106 | ``` 107 | 2. 安装完成后，检查 Node.js 和 npm 是否成功安装： 108 | 109 | ```bash 110 | node --version 111 | npm --version 112 | ``` 113 | 114 | #### 步骤 4：安装 Sudo 115 | 116 | `sudo` 是 Linux 系统中的提权指令，方便以管理员身份执行命令，我们可以在Windows里添加这个指令。**自从Windows 11 24H2开始**，Windows Terminal已经内置了Sudo功能，只需要在“设置”中的开发者选项页面开启即可。如果你使用的是Windows 10或者Windows 11 24H2以下版本，你可以使用Scoop安装Sudo。 117 | 118 | 1. 使用以下命令安装 Sudo： 119 | 120 | ```bash 121 | scoop install sudo 122 | ``` 123 | 2. 安装完成后，检查 Sudo 是否安装成功： 124 | 125 | ```bash 126 | sudo 127 | ``` 128 | 129 | #### 步骤 5：安装 VSCode 130 | 131 | Visual Studio Code 需要从官方网站下载安装。 132 | 133 | 1. 前往 [Visual Studio Code 官方网站](https://code.visualstudio.com/)，下载适用于 Windows 的安装包并进行安装。 134 | 2. 安装完成后，验证 VSCode 是否安装成功： 135 | 136 | ```bash 137 | code --version 138 | ``` 139 | 140 | ### 3. 安装 pnpm 141 | 142 | pnpm 是一种高效的 JavaScript 包管理工具，可以通过 npm 轻松安装。 143 | 144 | 1. 执行以下命令使用 npm 安装 pnpm： 145 | 146 | ```bash 147 | npm install -g pnpm 148 | ``` 149 | 2. 安装完成后，检查 pnpm 是否成功安装： 150 | 151 | ```bash 152 | pnpm --version 153 | ``` 154 | 155 | 至此，你已经完成了在 Windows 上利用 Scoop 配置开发环境并安装 pnpm 的全过程。 156 | 157 | ### 4. 常见问题 158 | 159 | * 如果开发过程中遇到权限问题，使用 `sudo`​ 命令来提升权限。 160 | * 如果某个命令未识别，重新开一个终端，并检查工具是否已成功安装。 161 | 162 | --- 163 | 164 | ## Python 光速入门 165 | python几乎是最适合初学者的编程语言，它的语法简单易懂，学习曲线平缓。我们**不会**在此文档中详细介绍 Python ，而是借助它简单易懂的特点快速感知编程中的一些基本概念。 166 | 通过这个简短的我们将学习使用高级语言中基本的**数据类型**和**运算符、控制流、函数、列表、字符串**等。 167 | 168 | ### 如何运行一个 Python 程序 169 | 170 | #### 方法一：使用命令提示符 171 | 172 | 1. **创建文件夹**：在你的电脑上，选择一个位置，新建一个文件夹，文件夹的名称建议使用英文字符（例如 `D:\PythonProjects`）。 173 | 2. **创建 Python 文件**：在文件夹中右键选择“新建”->“文本文档”。确保你可以看到文件扩展名 `.txt`。如果看不到，请修改文件夹选项来显示文件扩展名（百度搜索“如何显示文件扩展名”）。 174 | 3. **编写代码**：双击打开刚创建的文本文件，输入以下代码： 175 | 176 | ```python 177 | print("Hello, World!") 178 | ``` 179 | 180 | 4. **保存并重命名**：将文件另存为 `hello.py`，确保扩展名从 `.txt` 改为 `.py`。 181 | 5. **打开命令提示符**：在文件夹中，按住 `Shift` 键并右键点击空白处，选择“在此处打开命令窗口”或“在此处打开 PowerShell 窗口”。 182 | 6. **运行程序**：在命令提示符中输入： 183 | 184 | ```bash 185 | python hello.py 186 | ``` 187 | 188 | 你应该会看到输出：`Hello, World!` 189 | 190 | #### 方法二：使用 VSCode 191 | 192 | 1. **打开 VSCode**：首先，确保你已经安装了 Visual Studio Code。 193 | 2. **打开文件夹**：在 VSCode 中，点击“文件” -> “打开文件夹”，选择一个英文路径的文件夹（如 `C:\PythonProjects`）。 194 | 3. **新建 Python 文件**：在左侧的文件资源管理器中，点击“新建文件”图标，命名为 `hello.py`。 195 | 4. **编写代码**：在文件中输入以下代码： 196 | 197 | ```python 198 | print("Hello, World!") 199 | ``` 200 | 201 | 5. **运行程序**：按下 `F5` 键，选择“Python 文件”作为调试配置，程序将运行，输出结果会显示在终端。 202 | 203 | :::tip 204 | 如果 VSCode 提示你安装 Python 扩展，请根据提示操作，这会提升你的编程体验。 205 | ::: 206 | 207 | --- 208 | 209 | ### 编码规范 210 | 211 | **缩进**：Python 使用缩进来表示代码块的层级结构，通常使用 4 个空格作为一个缩进层级。 212 | 213 | **空格使用规则**： 214 | - 逗号 `,`、冒号 `:` 和分号 `;` 后添加一个空格。 215 | - 函数名与括号之间不要加空格，例如 `print(x)`。 216 | - 在赋值运算符 `=` 两边添加空格，但在函数参数中不要加空格。 217 | 218 | **命名规则**： 219 | - **变量和函数**：使用小写字母，单词之间用下划线连接，例如 `my_variable`。 220 | - **类名**：每个单词的首字母大写，例如 `MyClass`。 221 | 222 | --- 223 | 224 | ### 变量 225 | 226 | **变量**是用来存储数据的。Python 是一种动态类型语言，意味着你不需要事先声明变量类型，直接赋值即可。 227 | 228 | ```python 229 | x = 10 # 变量 x 是一个整数 230 | print(x) # 输出 10 231 | x = "hello" # 现在 x 是一个字符串 232 | print(x) # 输出 hello 233 | ``` 234 | 235 | --- 236 | 237 | ### 算术运算 238 | 239 | Python 提供了基本的算术运算，如加法、减法、乘法和除法，以及一些特殊运算： 240 | 241 | - `/`：浮点除法，结果是小数。 242 | - `//`：整数除法，结果是向下取整。 243 | - `%`：取余运算，返回余数。 244 | - `**`：幂运算，表示一个数的几次方。 245 | 246 | ```python 247 | print(5 / 2) # 输出 2.5 248 | print(5 // 2) # 输出 2 249 | print(5 % 2) # 输出 1 250 | print(5 ** 2) # 输出 25 251 | ``` 252 | 253 | --- 254 | 255 | ### 比较与逻辑运算符 256 | 257 | - **赋值运算符**：`=` 用于将值赋给变量。 258 | - **比较运算符**：`==`（等于）、`!=`（不等于）、`>`、`<`、`>=`、`<=`。 259 | - **逻辑运算符**：`and`（与）、`or`（或）、`not`（非）。 260 | 261 | ```python 262 | x = 5 263 | y = 2 264 | print(x == y) # 输出 False 265 | print(x > y) # 输出 True 266 | print((5 > 3) and (2 < 4)) # 输出 True 267 | ``` 268 | 269 | --- 270 | 271 | ### 成员运算符 272 | 273 | - **in**：检查某个元素是否在序列中。 274 | - **not in**：检查某个元素是否不在序列中。 275 | 276 | ```python 277 | a = 10 278 | b = [10, 20, 30] 279 | print(a in b) # 输出 True 280 | print(a not in b) # 输出 False 281 | ``` 282 | 283 | --- 284 | 285 | ### 控制流 286 | 287 | Python 提供了几种控制代码执行顺序的语句： 288 | 289 | 1. **`if` 条件语句**：根据条件判断执行不同的代码块。 290 | 291 | ```python 292 | age = 18 293 | if age >= 18: 294 | print("成年") 295 | else: 296 | print("未成年") 297 | ``` 298 | 299 | 2. **`for` 循环**：用于遍历序列中的每个元素。 300 | 301 | ```python 302 | for i in range(3): 303 | print(i) # 输出 0, 1, 2 304 | ``` 305 | 306 | 3. **`while` 循环**：只要条件为 `True`，就会一直执行代码块。 307 | 308 | ```python 309 | count = 0 310 | while count < 3: 311 | print(count) 312 | count += 1 313 | ``` 314 | 315 | 4. **`break` 语句**：用于跳出当前循环。 316 | 317 | ```python 318 | for i in range(5): 319 | if i == 3: 320 | break 321 | print(i) # 输出 0, 1, 2 322 | ``` 323 | 324 | 5. **`continue` 语句**：跳过当前循环的剩余部分，直接进入下一次循环。 325 | 326 | ```python 327 | for i in range(5): 328 | if i == 3: 329 | continue 330 | print(i) # 输出 0, 1, 2, 4 331 | ``` 332 | 333 | --- 334 | 335 | ### 列表 336 | 337 | **列表**是一个可变的、有序的元素集合，用方括号表示。你可以添加、访问、删除列表中的元素。 338 | 339 | ```python 340 | my_list = [1, 'hello', [2, 3]] 341 | my_list.append('new item') # 添加元素 342 | print(my_list[0]) # 输出 1 343 | print(my_list[-1]) # 输出 'new item' 344 | del my_list[1] # 删除元素 'hello' 345 | ``` 346 | 347 | --- 348 | 349 | ### 字符串 350 | 351 | 字符串用于表示文本，用单引号 `'` 或双引号 `"` 包裹。 352 | 353 | ```python 354 | s = "Hello World" 355 | print(s[0]) # 输出 'H' 356 | print(s.lower()) # 输出 'hello world' 357 | s += ", Python" 358 | print(s) # 输出 'Hello World, Python' 359 | ``` 360 | 361 | --- 362 | 363 | ### 生成器 364 | 365 | 生成器是用于生成大量数据的特殊迭代器，节省内存。 366 | 367 | ```python 368 | for i in range(5): 369 | print(i) # 输出 0 到 4 370 | ``` 371 | 372 | 生成器适合处理大量或无限数据。 373 | 374 | --- 375 | 376 | ### 赋值与比较 377 | 378 | - **赋值**：`=` 用于将值赋给变量。 379 | - **比较**：`==` 用于检查两个值是否相等，`!=` 用于检查是否不相等。 380 | 381 | ```python 382 | x = 5 383 | y = 2 384 | print(x == y) # 输出 False 385 | print(x != y) # 输出 True 386 | ``` 387 | 388 | --- 389 | 390 | 391 | 392 | ### 我学会了吗？ 393 | 394 | 现在，打开 [洛谷](https://www.luogu.com.cn/)，登录账号，在题库中选择“入门”题目，尝试解答一两道。如果顺利完成，说明你已经掌握了以上内容！ 395 | :::warning 396 | 本文档的目标不是讲解算法竞赛，该段落旨在让初学者体会编程的基本概念。 397 | ::: 398 | 399 | ## 快速了解 OJ 如何使用 400 | 401 | 在线评测系统（Online Judge，简称 OJ）是程序员练习编程和算法的常用平台。下面我们以洛谷（Luogu）上的一道经典题目 **A+B** 为例，讲解什么是题目的输入输出，如何在代码里按格式输入输出，以及常见的评测结果解读。 402 | 403 | ### 题目描述 404 | 405 | 给定两个整数 `A` 和 `B`，计算它们的和。 406 | 407 | ### 输入格式 408 | 409 | 一行，包含两个整数 `A` 和 `B`，以空格分隔。 410 | 411 | ### 输出格式 412 | 413 | 一行，输出 `A` 和 `B` 的和。 414 | 415 | ### 样例输入 416 | 417 | ```cmd 418 | 1 2 419 | ``` 420 | 421 | ### 样例输出 422 | 423 | ```cmd 424 | 3 425 | ``` 426 | 427 | ### Python 解法 428 | 429 | 以下是使用 Python 解决该问题的示例代码，注意看代码的输入输出格式和技巧： 430 | 431 | ```python 432 | # 读取输入，并将其拆分为两个整数 433 | a, b = map(int, input().split()) 434 | 435 | # 计算并输出结果 436 | print(a + b) 437 | ``` 438 | 439 | **代码说明：** 440 | 441 | * 使用 `input().split()`​ 读取一行输入，并按空格分隔。 442 | * 使用 `map(int, ...)`​ 将字符串转换为整数。 443 | * 使用 `print()`​ 输出结果。 444 | 445 | ### C++ 解法 446 | 447 | 以下是使用 C++ 解决该问题的示例代码： 448 | 449 | ```cpp 450 | #include 451 | using namespace std; 452 | 453 | int main() { 454 | int a, b; 455 | // 读取输入 456 | cin >> a >> b; 457 | // 输出结果 458 | cout << a + b << endl; 459 | return 0; 460 | } 461 | ``` 462 | 463 | **代码说明：** 464 | 465 | * 包含头文件 ``​ 以使用输入输出。 466 | * 使用 `cin`​ 读取两个整数。 467 | * 使用 `cout`​ 输出结果，并以 `endl`​ 换行。 468 | 469 | ### 提交步骤 470 | 471 | 1. **登录洛谷**：进入洛谷官方网站并登录你的账号。 472 | 2. **找到题目**：在题库中搜索 "A+B" 题目。 473 | 3. **编写代码**：在在线编辑器中粘贴上述代码，选择对应的编程语言（Python 或 C++）。 474 | 4. **提交评测**：点击提交按钮，等待评测结果。 475 | 476 | ### 评测结果解读 477 | 478 | * **AC（Accepted）** ：答案正确，程序通过所有测试用例。 479 | * **WA（Wrong Answer）** ：答案错误，程序未通过某些测试用例。 480 | * **TLE（Time Limit Exceeded）** ：超出时间限制，程序运行时间过长。 481 | * **MLE（Memory Limit Exceeded）** ：超出内存限制，程序占用内存过大。 482 | * **RE（Runtime Error）** ：运行时错误，程序在运行过程中崩溃或出现异常。 483 | * **CE（Compile Error）** ：编译错误，代码无法通过编译。 484 | 485 | ### 注意事项 486 | 487 | * **严格按照输入输出格式**：OJ 对输入输出格式要求非常严格，需与题目描述完全一致。 488 | * **数据范围**：注意题目中给定的数据范围，选择合适的数据类型（如 `int`​、`long`​ 等）。 489 | * **编码规范**：只使用标准库，避免平台不支持导致错误。 490 | 491 | ## 管理项目并和队友协作-GitHub注册 492 | 493 | ### 注册 GitHub 账号 494 | 495 | GitHub 是一个基于 Git 的代码托管平台，方便开发者协作和分享代码。 496 | 497 | **注册步骤：** 498 | 499 | 1. **访问 GitHub 网站：** 500 | 501 | * 前往 [GitHub 官方网站](https://github.com/)。 502 | 2. **创建账号：** 503 | 504 | * 点击“Sign up”按钮。 505 | * 输入邮箱、密码和用户名，按照提示完成注册流程。 506 | * 验证邮箱以激活账号。 507 | 508 | ### 创建自我介绍仓库 509 | 510 | 通过创建一个自我介绍的仓库，可以让他人更好地了解你。 511 | 512 | **创建步骤：** 513 | 514 | 1. **新建仓库：** 515 | 516 | * 登录 GitHub 后，点击右上角的“+”号，选择“New repository”。 517 | * **仓库名称需与用户名相同**，这样可以创建一个特殊的个人简介仓库。 518 | * 例如，用户名为 `your-username`​，则仓库名也需为 `your-username`​。 519 | 2. **填写仓库信息：** 520 | 521 | * 在“Repository name”中输入你的用户名。 522 | * 添加仓库描述，如“Welcome to my GitHub profile!”。 523 | * 勾选“Add a README file”选项。 524 | * 点击“Create repository”按钮。 525 | 3. **编辑 README 文件：** 526 | 527 | * 在新创建的仓库中，点击“README.md”文件。 528 | * 点击铅笔图标进行编辑。 529 | * 使用 Markdown 语法添加自我介绍内容，包括： 530 | 531 | * 你的昵称 532 | * 兴趣爱好 533 | * 掌握的技能 534 | 4. **提交更改：** 535 | 536 | * 编辑完成后，填写“Commit message”。 537 | * 点击“Commit changes”保存更改。 538 | 539 | 最终你的主页应该会展示你的自我介绍，例如： 540 | 541 | ​![image](assets/image-20240929211337-vvvpqdu.png)​ 542 | 543 | ## 恭喜完成预备工作 544 | 545 | 在你的电脑上执行这些指令，获得输出，这表明您已经配置好环境。 546 | 547 | ```cmd 548 | > python --version 549 | Python 3.12.3 550 | 551 | > git --version 552 | git version 2.45.1.windows.1 553 | 554 | > node --version 555 | v22.8.0 556 | 557 | > npm --version 558 | 10.8.2 559 | 560 | > sudo 561 | usage: sudo 562 | 563 | > code --version 564 | 0.41.2 565 | 566 | > pnpm --version 567 | 9.9.0 568 | ``` 569 | 570 | 571 | 572 | 573 | -------------------------------------------------------------------------------- /docs/public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Duke486/Web-Dev-Beginner/66d659aa151f16e63da52cf4056b83a0320926c2/docs/public/logo.png -------------------------------------------------------------------------------- /docs/schedule.md: -------------------------------------------------------------------------------- 1 | # 课程安排与时间表 2 | 3 | ## 课程安排原则 4 | 本课程前两周所有学生共同学习HTML、CSS、JavaScript及Git的基础知识，确保学生具备扎实的前端开发基础和版本控制工具的使用能力。第3周开始，课程将分为前端组和后端组，分别学习各自的技术栈。课程每周包含三部分：理论讲解（Doc）、实验操作（Lab）、独立作业（Homework）。 5 | 6 | 课程的设计宗旨是理论与实践结合，通过动手实验巩固知识，并最终完成一个完整的前后端项目。 7 | 8 | --- 9 | 10 | ## 前端组课程时间表 11 | 12 | | Week | 标题 | Doc | Lab | Homework | 13 | |------|----------------------|-----------------------------------------|---------------------------------|---------------------------------------| 14 | | 1 | **HTML, CSS, JS 基础** | [HTML/CSS基础，JS语法](./week-1/doc) | [创建调查问卷的外观](./week-1/lab) | [添加按钮，使用JS实现弹窗](./week-1/homework) | 15 | | 2 | **进阶JS & GitHub** | [表单与JS交互，Git协作](./week-2/doc) | [创建表单并获取数据，Git协作](./week-2/lab) | [计算用户输入数字的和](./week-2/homework) | 16 | | 3 | **DOM操作与事件处理** | [JavaScript DOM操作与事件处理](./week-3/前端doc) | [创建Todo List应用](./week-3/前端lab) | [点击按钮计数，改变背景颜色](./week-3/前端homework) | 17 | | 4 | **Vue.js 组件基础** | [Vue组件入门与props](./week-4/前端doc) | [创建通知展示Vue组件](./week-4/前端lab) | [Vue实现页面布局与数据绑定](./week-4/前端homework) | 18 | | 5 | **Vue路由与表单处理** | [Vue Router与双向数据绑定](./week-5/前端doc) | [创建多页面导航和表单输入页面](./week-5/前端lab) | [实现表单数据提交并验证](./week-5/前端homework) | 19 | | 6 | **Axios API请求** | [使用Axios发送GET/POST请求](./week-6/前端doc) | [获取API数据并展示在页面上](./week-6/前端lab) | [通过API获取并显示用户数据](./week-6/前端homework) | 20 | | 7 | **JWT认证 服务上线** | [JWT用户认证](./week-7/doc) | [服务上线部署](./week-7/lab) | 实践Doc内容 | 21 | | 8 | **Vue动画与过渡效果** |[动画、过渡效果、组件库](./week-8/前端) | [组件画廊](./week-8/前端) | [利用组件库重写页面](./week-8/前端) | 22 | | 9 | **项目整合与展示** | 回顾与总结 | 完成最终Vue项目并展示 | 提交最终Vue项目，展示功能 | 23 | 24 | --- 25 | 26 | ## 后端组课程时间表 27 | 28 | | Week | 标题 | Doc | Lab | Homework | 29 | |------|----------------------|------------------------------------|----------------------------------|-------------------------------------------| 30 | | 1 | **HTML, CSS, JS 基础** | [HTML/CSS基础，JS语法](./week-1/doc) | [创建调查问卷的外观](./week-1/lab) | [添加按钮，使用JS实现弹窗](./week-1/homework) | 31 | | 2 | **进阶JS & GitHub** | [表单与JS交互，Git协作](./week-2/doc) | [创建表单并获取数据，Git协作](./week-2/lab) | [计算用户输入数字的和](./week-2/homework) | 32 | | 3 | **Node.js 基础** | [Node.js 环境与基础操作](./week-3/后端doc) | [创建简单Node.js服务器](./week-3/后端lab) | [修改服务器返回包含当前时间的JSON](./week-3/后端homework) | 33 | | 4 | **Express 路由处理** | [Express 路由与API开发](./week-4/后端doc) | [创建查询用户信息的API](./week-4/后端lab) | [设计商店API](./week-4/后端homework) | 34 | | 5 | **处理POST请求** | [处理POST请求，接收和解析数据](./week-5/后端doc) | [实现一个POST路由，接收用户表单数据并返回确认消息](./week-5/后端lab) | [实现用户登录API，验证用户名和密码](./week-5/后端homework) | 35 | | 6 | **数据库操作** | [连接MongoDB数据库](./week-6/后端doc) | [创建用户数据表，并保存用户数据](./week-6/后端lab) | 实现一个API，返回数据库中的所有用户数据(./week-6/后端homework) | 36 | | 7 | **用户认证与JWT** | [使用JWT进行用户认证](./week-7/doc) | [服务上线部署](./week-7/lab) | 实践Doc内容 | 37 | | 8 | **文件上传** | [处理文件上传](./week-8/后端) | [测试头像上传和展示功能](./week-8/后端) | [删除旧头像](./week-8/后端) | 38 | | 9 | **项目整合与展示** | 回顾与总结 | 完成最终Express API项目并展示 | 提交最终API项目，展示功能 | 39 | 40 | --- 41 | 42 | -------------------------------------------------------------------------------- /docs/schedule.old.md: -------------------------------------------------------------------------------- 1 | # 课程安排与时间表 2 | 3 | ## 课程安排原则 4 | 本课程前两周所有学生共同学习HTML、CSS、JavaScript及Git的基础知识，确保学生具备扎实的前端开发基础和版本控制工具的使用能力。第3周开始，课程将分为前端组和后端组，分别学习各自的技术栈。课程每周包含三部分：理论讲解（Doc）、实验操作（Lab）、独立作业（Homework）。 5 | 6 | 课程的设计宗旨是理论与实践结合，通过动手实验巩固知识，并最终完成一个完整的前后端项目。 7 | 8 | --- 9 | 10 | ## 前端组课程时间表 11 | 12 | | Week | 标题 | Doc | Lab | Homework | 13 | |------|----------------------|-----------------------------------------|---------------------------------|---------------------------------------| 14 | | 1 | **HTML, CSS, JS 基础** | [HTML/CSS基础，JS语法](./week-1/doc) | [创建调查问卷的外观](./week-1/lab) | [添加按钮，使用JS实现弹窗](./week-1/homework) | 15 | | 2 | **进阶JS & GitHub** | [表单与JS交互，Git协作](./week-2/doc) | [创建表单并获取数据，Git协作](./week-2/lab) | [计算用户输入数字的和](./week-2/homework) | 16 | | 3 | **DOM操作与事件处理** | [JavaScript DOM操作与事件处理](./week-3/前端doc) | [创建Todo List应用](./week-3/前端lab) | [点击按钮计数，改变背景颜色](./week-3/前端homework) | 17 | | 4 | **Vue.js 组件基础** | [Vue组件入门与props](./week-4/前端doc) | [创建通知展示Vue组件](./week-4/前端lab) | [Vue实现页面布局与数据绑定](./week-4/前端homework) | 18 | | 5 | **Vue路由与表单处理** | [Vue Router与双向数据绑定](./week-5/前端doc) | 创建多页面导航和表单输入页面 | 实现表单数据提交并验证 | 19 | | 6 | **Axios API请求** | 使用Axios发送GET/POST请求 | 获取API数据并展示在页面上 | 通过API获取并显示用户数据 | 20 | | 7 | **Vuex状态管理** | Vuex全局状态管理基础 | 使用Vuex实现全局状态共享 | 让不同组件共享状态（如计数器） | 21 | | 8 | **Vue动画与过渡效果** | Vue中的动画与过渡效果 | 添加组件过渡动画 | 实现页面切换时的过渡效果 | 22 | | 9 | **项目优化与懒加载** | Vue项目性能优化 | 项目懒加载优化与按需加载 | 优化首屏加载时间，减少资源消耗 | 23 | | 10 | **项目整合与展示** | 回顾与总结 | 完成最终Vue项目并展示 | 提交最终Vue项目，展示功能 | 24 | 25 | --- 26 | 27 | ## 后端组课程时间表 28 | 29 | | Week | 标题 | Doc | Lab | Homework | 30 | |------|----------------------|------------------------------------|----------------------------------|-------------------------------------------| 31 | | 1 | **HTML, CSS, JS 基础** | [HTML/CSS基础，JS语法](./week-1/doc) | [创建调查问卷的外观](./week-1/lab) | [添加按钮，使用JS实现弹窗](./week-1/homework) | 32 | | 2 | **进阶JS & GitHub** | [表单与JS交互，Git协作](./week-2/doc) | [创建表单并获取数据，Git协作](./week-2/lab) | [计算用户输入数字的和](./week-2/homework) | 33 | | 3 | **Node.js 基础** | [Node.js 环境与基础操作](./week-3/后端doc) | [创建简单Node.js服务器](./week-3/后端lab) | [修改服务器返回包含当前时间的JSON](./week-3/后端homework) | 34 | | 4 | **Express 路由处理** | [Express 路由与API开发](./week-4/后端doc) | [创建查询用户信息的API](./week-4/后端lab) | [设计商店API](./week-4/后端homework) | 35 | | 5 | **处理POST请求** | [处理POST请求，接收和解析数据](./week-5/后端doc) | 实现一个POST路由，接收用户表单数据并返回确认消息 | 实现用户登录API，验证用户名和密码 | 36 | | 6 | **数据库操作** | 连接MongoDB或MySQL数据库 | 创建用户数据表，并保存用户数据 | 实现一个API，返回数据库中的所有用户数据 | 37 | | 7 | **用户认证与JWT** | 使用JWT进行用户认证 | 实现登录功能并返回JWT令牌 | 增加JWT中间件，保护特定API路由 | 38 | | 8 | **文件上传** | 处理文件上传 | 创建文件上传API，并保存文件到服务器 | 返回上传文件的URL并提供下载功能 | 39 | | 9 | **API性能优化** | API性能优化与缓存 | 为API添加缓存机制，减少查询次数 | 实现分页查询功能，优化数据处理 | 40 | | 10 | **项目整合与展示** | 回顾与总结 | 完成最终Express API项目并展示 | 提交最终API项目，展示功能 | 41 | 42 | --- 43 | 44 | -------------------------------------------------------------------------------- /docs/week-1/doc.md: -------------------------------------------------------------------------------- 1 | # **HTML, CSS, JS 基础** 2 | ![image](../assets/html.jpg) 3 | ## 1. HTML 基础 4 | 5 | 6 | ### 1.1 HTML和标签是什么？ 7 | HTML (HyperText Markup Language) 是构建网页的基础，它定义了网页的结构和内容。通过 HTML，你可以创建文本、图片、表格、链接等元素。 8 | HTML 标签是网页的基本构建块，它们定义了网页中每个元素的作用和显示方式。大多数标签通过**一对尖括号**包裹，像这样：`<标签名>内容`。这种形式叫做**双标签**，标签内的内容会被浏览器渲染。比如： 9 | 10 | ```html 11 |

这是一个段落。

12 | ``` 13 | 14 | 有些标签是**单独存在**的，不需要结束标签。这些叫做**自闭合标签**，例如图片标签： 15 | 16 | ```html 17 | 描述 18 | ``` 19 | 20 | 每个标签通常由三部分组成： 21 | 1. **标签名**：定义了元素的类型（例如`

`表示段落，``表示图片）。 22 | 2. **属性**：可以为标签添加额外的信息（例如`src`指定图片路径，`href`指定链接地址）。 23 | 3. **内容**：在双标签中，标签包裹的内容将显示在页面上（例如`

`中的文本）。 24 | 25 | ### 常见特殊标签及其作用 26 | 27 | - **``**：包含页面的元数据，不显示在页面上。常用的属性有 `meta`、`link` 等，控制字符编码、引入CSS等。 28 | 29 | - **``**：包含网页的主要内容，显示在浏览器中。页面中所有的可见元素都应该放在``中。 30 | 31 | - **` 176 | 177 | 178 |

调查问卷

179 |
180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 |
188 | 189 | 190 | ``` 191 | 192 | 193 | 在这里的代码部分，使用了**CSS选择器**来定位页面中的不同元素并为其设置样式。我们来逐步解析这些选择器是如何选中元素的，以及样式的编写格式。 194 | 195 | 196 | #### 1. 代码中的CSS选择器如何选中元素？ 197 | 198 | - **`body` 选择器**：直接选择 `` 标签，表示作用于整个页面的主体内容。我们给整个页面设置了背景颜色 `#f0f0f0` 和字体 `Arial`。 199 | 200 | - **`h1` 选择器**：直接选择 `

` 标签，表示作用于页面中的一级标题。为标题文字设置了颜色为 `#333`，即深灰色。 201 | 202 | - **`form` 选择器**：选择 `
` 标签，表示作用于整个表单区域。我们为表单设置了白色背景、内边距（`padding`），边框圆角（`border-radius`），并让表单在页面中居中显示（通过设置宽度和 `margin`）。 203 | 204 | - **`label, input` 选择器**：这是一个组合选择器，表示选择所有的 `